add js #futurereference

assets/public/js/application.js

@@ -259,7 +259,7 @@ var downloadEvent = function (event) {
  return false;
 }
 
-var handleFiles = function(files) {
+var handleFiles = function (files) {
  let button = document.getElementById("upload");
  let html = button.changeToLoading();
  let data = new FormData();
@@ -348,7 +348,37 @@ var localizeDatetime = function (e, index, ar) {
  e.textContent = d.toLocaleString();
 }
 
+var dragAndDrop = function () {
+ let drop = document.getElementById("listing");
 
+ if (!drop) return false;
+
+ let files = document.querySelectorAll('.item[data-dir="false"]');
+ let dirs = document.querySelectorAll('.item[data-dir="true"]');
+
+ Array.from(dirs).forEach(dir => {
+     dir.addEventListener("dragenter", event => {
+         dir.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)";
+     }, false);
+
+     dir.addEventListener("dragleave", event => {
+         dir.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12)";
+     }, false);
+ });
+
+
+ document.addEventListener("dragover", (event) => {
+  Array.from(files).forEach(file => {
+   file.style.opacity = 0.5;
+  });
+ }, false);
+
+ document.addEventListener("dragend", (event) => {
+  Array.from(files).forEach(file => {
+   file.style.opacity = 1;
+  });
+ }, false);
+}
 
 document.addEventListener("DOMContentLoaded", function (event) {
  var timeList = Array.prototype.slice.call(document.getElementsByTagName("time"));
@@ -377,50 +407,41 @@ document.addEventListener("DOMContentLoaded", function (event) {
  document.getElementById("download").addEventListener("click", downloadEvent);
 
  let drop = document.getElementById("listing");
- /* if (drop) {
+ dragAndDrop();
-     drop.addEventListener("dragenter", dragenter, false);
-     drop.addEventListener("dragover", dragover, false);
-     drop.addEventListener("dragdrop", drop, false);
- } */
 
- drop.addEventListener("drag", function( event ) {
+ drop.addEventListener("drag", function (event) {
 
  }, false);
 
- drop.addEventListener("dragstart", function( event ) {
+ drop.addEventListener("dragstart", function (event) {
+
   // store a ref. on the dragged elem
-     dragged = event.target;
+  //dragged = event.target;
   // make it half transparent
   event.target.style.opacity = .5;
  }, false);
 
- drop.addEventListener("dragend", function( event ) {
+ drop.addEventListener("dragend", function (event) {
   // reset the transparency
   event.target.style.opacity = "";
  }, false);
 
-
+ drop.addEventListener("dragover", function (event) {
- drop.addEventListener("dragover", function( event ) {
   event.preventDefault();
  }, false);
 
- drop.addEventListener("dragenter", function( event ) {
+ drop.addEventListener("dragenter", function (event) {
   // highlight potential drop target when the draggable element enters it
-
+  //event.target.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important";
-         event.target.style.background = "purple";
-
-
  }, false);
 
- drop.addEventListener("dragleave", function( event ) {
+
+ drop.addEventListener("dragleave", function (event) {
   // reset background of potential drop target when the draggable element leaves it
-     if ( event.target.className == "dropzone" ) {
-         event.target.style.background = "";
-     }
 
  }, false);
 
- drop.addEventListener("drop", function( event ) {
+ drop.addEventListener("drop", function (event) {
   // prevent default action (open as link for some elements)
   event.preventDefault();
   var dt = event.dataTransfer;

assets/templates/listing.tmpl

@@ -1,8 +1,8 @@
 {{ define "content" }}
- <div class="listing" draggable="true">
+ <div class="listing">
   <div class="container" id="listing">
    {{- range .Items}}
-   <div class="item" id="{{.URL}}">
+   <div class="item" data-dir="{{- if .IsDir}}true{{ else }}false{{ end }}" id="{{.URL}}" draggable="true">
     <div>
      <a href="{{.URL}}">
       {{- if .IsDir}}