Drag down to dissmiss upload on mobile

gallery/static/js/uploadTab.js

@@ -20,11 +20,17 @@ function openUploadTab() {
 // close upload tab
 function closeUploadTab() {
     let uploadTab = document.querySelector(".upload-panel");
+    let uploadTabContainer = document.querySelector(".upload-panel .container");
 
     // un-Stop scrolling and close upload tab
     document.querySelector("html").style.overflow = "auto";
     uploadTab.classList.remove("open");
-    setTimeout(function () { uploadTab.style.display = "none"; }, 250);
+    setTimeout(function () {
+        uploadTab.style.display = "none";
+
+        uploadTabContainer.style.transform = "";
+        uploadTab.dataset.lastY = 0;
+    }, 250);
 }
 
 // toggle upload tab
@@ -38,6 +44,43 @@ function toggleUploadTab() {
     }
 }
 
+function tabDragStart(event) {
+    event.preventDefault();
+
+    let uploadTab = document.querySelector(".upload-panel .container");
+    let offset = uploadTab.getBoundingClientRect().y;
+
+    uploadTab.classList.add("dragging");
+
+    document.addEventListener('touchmove', event => {
+        if (uploadTab.classList.contains("dragging")) {
+            if (event.touches[0].clientY - offset >= 0) {
+                uploadTab.dataset.lastY = event.touches[0].clientY;
+            } else {
+                uploadTab.dataset.lastY = offset;
+            }
+
+            uploadTab.style.transform = `translateY(${uploadTab.dataset.lastY - offset}px)`;
+        }
+    });
+}
+function tabDragStopped(event) {
+    event.preventDefault();
+    
+    let uploadTab = document.querySelector(".upload-panel .container");
+
+    uploadTab.classList.remove("dragging");
+
+    if (uploadTab.dataset.lastY > (screen.height * 0.3)) {
+        closeUploadTab();
+    } else {
+        uploadTab.style.transition = "transform 0.25s cubic-bezier(0.76, 0, 0.17, 1)";
+        uploadTab.style.transform = "translateY(0px)";
+        setTimeout(function () { uploadTab.style.transition = ""; }, 250);
+    }
+}
+
+
 // Edging the file plunge :3
 function fileActivate(event) {
     event.preventDefault()
@@ -97,7 +140,7 @@ function clearUpload() {
 }
 
 
-function createJon(file) {
+function createJob(file) {
     jobContainer = document.createElement("div");
     jobContainer.classList.add("job");
 
@@ -125,12 +168,15 @@ function createJon(file) {
 
 document.addEventListener('DOMContentLoaded', function() {
     // Function to upload images
-    let uploadForm = document.querySelector('#uploadForm');
+    let uploadTab = document.querySelector(".upload-panel");
-    let fileDrop = document.querySelector('.fileDrop-block');
+    let uploadTabDrag = uploadTab.querySelector("#dragIndicator");
-    let fileDropTitle = fileDrop.querySelector('.status');
+    let uploadForm = uploadTab.querySelector('#uploadForm');
     let jobList = document.querySelector(".upload-jobs");
     
-    let fileUpload = uploadForm.querySelector('#file');
+    let fileDrop = uploadForm.querySelector('.fileDrop-block');
+    let fileDropTitle = fileDrop.querySelector('.status');
+    let fileUpload = fileDrop.querySelector('#file');
+
     let fileAlt = uploadForm.querySelector('#alt');
     let fileDescription = uploadForm.querySelector('#description');
     let fileTags = uploadForm.querySelector('#tags');
@@ -140,6 +186,10 @@ document.addEventListener('DOMContentLoaded', function() {
     fileDefault();
 
     
+    // Tab is dragged
+    uploadTabDrag.addEventListener('touchstart', tabDragStart, false);
+    uploadTabDrag.addEventListener('touchend', tabDragStopped, false);
+
     // Drag over/enter event
     fileDrop.addEventListener('dragover', fileActivate, false);
     fileDrop.addEventListener('dragenter', fileActivate, false);
@@ -171,7 +221,7 @@ document.addEventListener('DOMContentLoaded', function() {
         formData.append("description", fileDescription.value);
         formData.append("tags", fileTags.value);
 
-        jobItem = createJon(fileUpload.files[0]);
+        jobItem = createJob(fileUpload.files[0]);
         jobStatus = jobItem.querySelector(".job__status");
 
         // Upload the information

gallery/templates/layout.html

@@ -119,6 +119,7 @@
             <div class="upload-panel">
                 <span class="click-off" onclick="closeUploadTab()"></span>
                 <div class="container">
+                    <span id="dragIndicator"></span>
                     <h3>Upload stuffs</h3>
                     <p>May the world see your stuff 👀</p>
                     <form id="uploadForm">

gallery/themes/default/components/elements/upload-panel.sass

@@ -56,7 +56,6 @@
 
         z-index: +1
 
-
     .container
         padding: 1rem
 
@@ -78,6 +77,31 @@
 
         transition: left 0.25s cubic-bezier(0.76, 0, 0.17, 1), bottom 0.25s cubic-bezier(0.76, 0, 0.17, 1), opacity 0.25s cubic-bezier(0.76, 0, 0.17, 1)
 
+        #dragIndicator
+            display: none
+
+            position: absolute
+            top: 0
+            left: 0
+
+            width: 100%
+            height: 3rem
+
+            z-index: +1
+
+            &::after
+                content: ''
+                width: 8rem
+                height: 3px
+
+                position: absolute
+                top: 0.5rem
+                left: 50%
+                transform: translate(-50%, -50%)
+
+                background-color: RGB($bg-400)
+                border-radius: $rad-inner
+
     .upload-jobs
         display: flex
         flex-direction: column
@@ -197,6 +221,9 @@
 
             border-radius: $rad $rad 0 0
 
+            #dragIndicator
+                display: block
+
         &.open
             .container
                 left: 0