From 1de64002107bd21c69f6bd2b54dce3b2511abb2d Mon Sep 17 00:00:00 2001
From: Marvin Scham <dev@marvinscham.de>
Date: Mon, 3 May 2021 12:08:13 +0200
Subject: [PATCH] Added proper whole-page drag-and-drop support

---
 main.html     |  2 +-
 script.js     | 19 ++++++++++++++++++-
 style.css     | 34 +++++++++++++++++++++++++++-------
 style.css.map |  2 +-
 style.scss    | 45 ++++++++++++++++++++++++++++++++++++++-------
 5 files changed, 85 insertions(+), 17 deletions(-)

diff --git a/main.html b/main.html
index dc161fd..dfc5ec2 100644
--- a/main.html
+++ b/main.html
@@ -14,7 +14,7 @@
     </div>
     <div id="content">
         <div class="block">
-            <input type="file" name="file" id="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0]); renew();">    
+            <input type="file" name="file" id="file">    
             <label for="file" id="filelabel">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                     <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
diff --git a/script.js b/script.js
index 96c2c75..5bdfc20 100644
--- a/script.js
+++ b/script.js
@@ -47,6 +47,7 @@ function getAndSetDominantColor() {
     dc.style.backgroundColor = hexCol;
     dc.title = hexCol;
     img.style.borderColor = hexCol;
+    copyToClipboard(hexCol);
 }
 
 function getAndSetPalette() {
@@ -99,8 +100,24 @@ function rgbToHex(r, g, b) {
 
 //##########################################################################################################################
 
-const custom = document.getElementById("custom");
+const file = document.getElementById("file");
+file.addEventListener("change", function () {
+    document.getElementById('img').src = window.URL.createObjectURL(this.files[0]);
+    renew();
+});
 
+const body = document.getElementsByTagName("body")[0];
+body.addEventListener("dragover", function () {
+    file.classList.add("show");
+});
+["dragleave", "drop"].forEach(function (a) {
+    file.addEventListener(a, function () {
+        file.classList.remove("show");
+    });
+});
+
+
+const custom = document.getElementById("custom");
 custom.addEventListener("keyup", function () {
     if (custom.value.length == 7) {
         document.getElementById("img").style.borderColor = custom.value;
diff --git a/style.css b/style.css
index 5f1b751..6176fb1 100644
--- a/style.css
+++ b/style.css
@@ -14,6 +14,7 @@ body {
   right: 0;
   line-height: 100px;
   text-align: center;
+  z-index: 2;
 }
 
 #header span {
@@ -104,15 +105,34 @@ h1 {
 }
 
 #content input#file {
-  position: absolute;
-  height: 85px;
-  max-width: calc(800px + 4rem);
-  width: calc(100% - 2rem);
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+  visibility: hidden;
+  opacity: 0;
+}
+
+#content input#file.show {
+  visibility: visible;
+  opacity: 1;
+}
+
+#content input#file:after {
+  content: 'Drop cover image anywhere...';
+  color: white;
+  text-shadow: black 2px 0px 0px, black 1.75517px 0.95885px 0px, black 1.0806px 1.68294px 0px, black 0.14147px 1.99499px 0px, black -0.83229px 1.81859px 0px, black -1.60229px 1.19694px 0px, black -1.97998px 0.28224px 0px, black -1.87291px -0.70157px 0px, black -1.30729px -1.5136px 0px, black -0.42159px -1.95506px 0px, black 0.56732px -1.91785px 0px, black 1.41734px -1.41108px 0px, black 1.92034px -0.55883px 0px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  left: 50%;
-  top: 116px;
-  opacity: 0;
+  font-size: 2rem;
 }
 
 #content input#file:hover {
diff --git a/style.css.map b/style.css.map
index 00999b2..1f9b057 100644
--- a/style.css.map
+++ b/style.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "style.scss"
     ],
diff --git a/style.scss b/style.scss
index 18d8e41..73a7ebb 100644
--- a/style.scss
+++ b/style.scss
@@ -14,6 +14,7 @@ body {
   right: 0;
   line-height: 100px;
   text-align: center;
+  z-index: 2;
 
   span {
     color: white;
@@ -100,15 +101,45 @@ h1 {
   }
 
   input#file {
-    position: absolute;
-    height: 85px;
-    max-width: calc(800px + 4rem);
-    width: calc(100% - 2rem);
-    transform: translateX(-50%);
-    left: 50%;
-    top: 116px;
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transition: opacity 0.3s ease;
+    visibility: hidden;
     opacity: 0;
 
+    &.show {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    &:after {
+      content: 'Drop cover image anywhere...';
+      color: white;
+      text-shadow: rgb(0, 0, 0) 2px 0px 0px,
+        rgb(0, 0, 0) 1.75517px 0.958851px 0px,
+        rgb(0, 0, 0) 1.0806px 1.68294px 0px,
+        rgb(0, 0, 0) 0.141474px 1.99499px 0px,
+        rgb(0, 0, 0) -0.832294px 1.81859px 0px,
+        rgb(0, 0, 0) -1.60229px 1.19694px 0px,
+        rgb(0, 0, 0) -1.97998px 0.28224px 0px,
+        rgb(0, 0, 0) -1.87291px -0.701566px 0px,
+        rgb(0, 0, 0) -1.30729px -1.5136px 0px,
+        rgb(0, 0, 0) -0.421592px -1.95506px 0px,
+        rgb(0, 0, 0) 0.567324px -1.91785px 0px,
+        rgb(0, 0, 0) 1.41734px -1.41108px 0px,
+        rgb(0, 0, 0) 1.92034px -0.558831px 0px;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 2rem;
+    }
+
     &:hover {
       cursor: pointer;