From ed07cb8460c8f19874820a8aeb7c46950f5b3bd6 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sun, 25 Nov 2018 17:37:08 -0600
Subject: [PATCH] Make entries draggable

---
 manage/draggable.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 manage/manage.css   |  7 ++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 manage/draggable.js

diff --git a/manage/draggable.js b/manage/draggable.js
new file mode 100644
index 00000000..a4841fbc
--- /dev/null
+++ b/manage/draggable.js
@@ -0,0 +1,44 @@
+/* global UI $$ */
+'use strict';
+
+// Polyfill for mobile? - https://caniuse.com/#feat=dragndrop
+(() => {
+  let dragged = null;
+
+  function cleanup() {
+    $$('.entry.dragging').forEach(el => {
+      el.classList.remove('dragging');
+    });
+    $('body').classList.remove('dragging');
+  }
+
+  document.addEventListener('dragstart', event => {
+    const el = event.target.closest('.entry');
+    if (el) {
+      dragged = el;
+      el.classList.add('dragging');
+      $('body').classList.add('dragging');
+    }
+  }, false);
+
+  document.addEventListener('dragend', () => {
+    cleanup();
+  });
+
+  document.addEventListener('dragenter', event => {
+    const el = event.target.closest('.entry, .entry-header');
+    if (el && dragged) {
+      // Insert after the target; keeps header at top
+      el.after(dragged);
+    }
+  }, false);
+
+  document.addEventListener('drop', event => {
+    event.preventDefault();
+    cleanup();
+    if (dragged) {
+      dragged = null;
+    }
+  }, false);
+
+})();
diff --git a/manage/manage.css b/manage/manage.css
index 64e3ef37..a82dbb56 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -226,8 +226,13 @@ a:hover {
   pointer-events: none;
 }
 
+body.dragging .entry:not(.dragging) .entry-name:before {
+  /* hide the sustained hover */
+  background-image: none !important;
+}
+
 .entry.dragging {
-  background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
+  background: linear-gradient(to right, hsla(350, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
 }
 
 .entry.enabled .entry-name:hover .style-name {