From 9df354f2e18a9fd1ee3559b038baf3a1846a5233 Mon Sep 17 00:00:00 2001
From: WrinklyNinja <wrinklyninja1@gmail.com>
Date: Fri, 29 Aug 2014 19:15:12 +0100
Subject: [PATCH] Refactored drag 'n' drop code.

---
 resources/report/css/style.css |  1 +
 resources/report/js/custom.js  | 43 ++++++++++++++++++++++++++++------
 resources/report/js/script.js  | 21 -----------------
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index 0adf63ff..d4182607 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -387,6 +387,7 @@ body.editMode header #headerOverlay {
 }
 [draggable] {
     -webkit-user-select: none;
+    cursor: move;
 }
 .highlight {
     background: #69aaff;
diff --git a/resources/report/js/custom.js b/resources/report/js/custom.js
index bec62942..35805cee 100644
--- a/resources/report/js/custom.js
+++ b/resources/report/js/custom.js
@@ -315,14 +315,14 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
                 /* Remove drag 'n' drop event handlers. */
                 var elements = document.getElementById('pluginsNav').children;
                 for (var i = 0; i < elements.length; ++i) {
-                    elements[i].removeAttribute('draggable', true);
-                    elements[i].removeEventListener('dragstart', handlePluginDragStart, false);
+                    elements[i].removeAttribute('draggable');
+                    elements[i].removeEventListener('dragstart', elements[i].handleDragStart, false);
                 }
                 elements = card.shadowRoot.getElementsByTagName('table');
                 for (var i = 0; i < elements.length; ++i) {
                     if (elements[i].id == 'loadAfter' || elements[i].id == 'req' || elements[i].id == 'inc') {
-                        elements[i].removeEventListener('drop', handlePluginDrop, false);
-                        elements[i].removeEventListener('dragover', handlePluginDragOver, false);
+                        elements[i].removeEventListener('drop', elements[i].handleDrop, false);
+                        elements[i].removeEventListener('dragover', elements[i].handleDragOver, false);
                     }
                 }
 
@@ -500,13 +500,13 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
             elements = document.getElementById('pluginsNav').children;
             for (var i = 0; i < elements.length; ++i) {
                 elements[i].draggable = true;
-                elements[i].addEventListener('dragstart', handlePluginDragStart, false);
+                elements[i].addEventListener('dragstart', elements[i].handleDragStart, false);
             }
             elements = this.shadowRoot.getElementsByTagName('table');
             for (var i = 0; i < elements.length; ++i) {
                 if (elements[i].id == 'loadAfter' || elements[i].id == 'req' || elements[i].id == 'inc') {
-                    elements[i].addEventListener('drop', handlePluginDrop, false);
-                    elements[i].addEventListener('dragover', handlePluginDragOver, false);
+                    elements[i].addEventListener('drop', elements[i].handleDrop, false);
+                    elements[i].addEventListener('dragover', elements[i].handleDragOver, false);
                 }
             }
 
@@ -618,6 +618,13 @@ var PluginCard = document.registerElement('plugin-card', {prototype: pluginCardP
 /* Create a <plugin-li> element type that extends from <li>. */
 var pluginLIProto = Object.create(HTMLLIElement.prototype, {
 
+    handleDragStart: {
+        value: function(evt) {
+            evt.dataTransfer.effectAllowed = 'copy';
+            evt.dataTransfer.setData('text/plain', evt.target.textContent);
+        }
+    },
+
     createdCallback: {
 
         value: function() {
@@ -753,6 +760,28 @@ var MessageDialog = document.registerElement('message-dialog', {
 /* Create a <editable-table> element type that extends from <table>. */
 var EditableTableProto = Object.create(HTMLTableElement.prototype, {
 
+    handleDrop: {
+        value: function(evt) {
+            evt.stopPropagation();
+
+            if (evt.currentTarget.tagName == 'TABLE' && (evt.currentTarget.id == 'req' || evt.currentTarget.id == 'inc' || evt.currentTarget.id == 'loadAfter')) {
+                var data = {
+                    name: evt.dataTransfer.getData('text/plain')
+                };
+                evt.currentTarget.addRow(data);
+            }
+
+            return false;
+        }
+    },
+
+    handleDragOver: {
+        value: function(evt) {
+            evt.preventDefault();
+            evt.dataTransfer.dropEffect = 'copy';
+        }
+    },
+
     getRowsData: {
         value: function(writableOnly) {
             var writableRows = [];
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index 154becf4..0d3cde96 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -946,27 +946,6 @@ function copyContent(evt) {
 
     loot.query(request).catch(processCefError);
 }
-function handlePluginDrop(evt) {
-    evt.stopPropagation();
-
-    if (evt.currentTarget.tagName == 'TABLE' && (evt.currentTarget.id == 'req' || evt.currentTarget.id == 'inc' || evt.currentTarget.id == 'loadAfter')) {
-        var data = {
-            name: evt.dataTransfer.getData('text/plain')
-        };
-        evt.currentTarget.addRow(data);
-    }
-
-    return false;
-}
-function handlePluginDragStart(evt) {
-    evt.dataTransfer.effectAllowed = 'copy';
-    evt.dataTransfer.setData('text/plain', evt.target.textContent);
-}
-function handlePluginDragOver(evt) {
-    evt.preventDefault();
-    evt.dataTransfer.dropEffect = 'copy';
-}
-
 function areSettingsValid() {
     /* Validate inputs individually. */
     var inputs = document.getElementById('settings').getElementsByTagName('input');