From 0cbadee2e375ba71dc2c945dfce1e11724519c90 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Wed, 27 Jul 2016 23:51:42 -0700
Subject: [PATCH] Abstract file dragging

---
 js/DragTarget.jsx | 29 +++++++++++++++
 js/MainWindow.jsx | 91 ++++++++++++++++++++++++++---------------------
 js/main-window.js | 22 ------------
 3 files changed, 79 insertions(+), 63 deletions(-)
 create mode 100644 js/DragTarget.jsx

diff --git a/js/DragTarget.jsx b/js/DragTarget.jsx
new file mode 100644
index 00000000..62e5f4d7
--- /dev/null
+++ b/js/DragTarget.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+class DragTarget extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleDrop = this.handleDrop.bind(this);
+  }
+
+  supress(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  handleDrop(e) {
+    this.supress(e);
+    this.props.handleFiles(e.dataTransfer.files);
+  }
+
+  render() {
+    return <div
+      onDragEnter={this.supress}
+      onDragOver={this.supress}
+      onDrop={this.handleDrop}>;
+      {this.props.children}
+    </div>;
+  }
+}
+
+module.exports = DragTarget;
diff --git a/js/MainWindow.jsx b/js/MainWindow.jsx
index d035da70..6e340fb1 100644
--- a/js/MainWindow.jsx
+++ b/js/MainWindow.jsx
@@ -6,6 +6,7 @@ import Actions from './Actions.jsx';
 import Balance from './Balance.jsx';
 import Close from './Close.jsx';
 import ContextMenu from './ContextMenu.jsx';
+import DragTarget from './DragTarget.jsx';
 import Eject from './Eject.jsx';
 import Kbps from './Kbps.jsx';
 import Khz from './Khz.jsx';
@@ -36,49 +37,57 @@ const MainWindow = (props) => {
     shade,
     closed
   });
-  return <div id='main-window' className={className}>
-    <div id='loading'>Loading...</div>
-    <div id='title-bar' className='selected'>
-      <ContextMenu mediaPlayer={props.mediaPlayer} winamp={props.winamp} />
-      <ShadeTime />
-      <div id='minimize'></div>
-      <Shade />
-      <Close />
-    </div>
-    <div className='status'>
-      <div id='clutter-bar'>
-        <div id='button-o'></div>
-        <div id='button-a'></div>
-        <div id='button-i'></div>
-        <div id='button-d' className={props.display.doubled ? 'selected' : ''}></div>
-        <div id='button-v'></div>
+
+  // TODO: Move this to an actionCreator
+  const handleDrop = (files) => {
+    props.winamp.loadFromFileReference(files[0]);
+  };
+
+  return <DragTarget handleFiles={handleDrop}>
+    <div id='main-window' className={className}>
+      <div id='loading'>Loading...</div>
+      <div id='title-bar' className='selected'>
+        <ContextMenu mediaPlayer={props.mediaPlayer} winamp={props.winamp} />
+        <ShadeTime />
+        <div id='minimize'></div>
+        <Shade />
+        <Close />
       </div>
-      <div id='play-pause'></div>
-      <div id='work-indicator' className={props.display.working ? 'selected' : ''}></div>
-      <Time />
-      <canvas id='visualizer' width='152' height='32'></canvas>
+      <div className='status'>
+        <div id='clutter-bar'>
+          <div id='button-o'></div>
+          <div id='button-a'></div>
+          <div id='button-i'></div>
+          <div id='button-d' className={props.display.doubled ? 'selected' : ''}></div>
+          <div id='button-v'></div>
+        </div>
+        <div id='play-pause'></div>
+        <div id='work-indicator' className={props.display.working ? 'selected' : ''}></div>
+        <Time />
+        <canvas id='visualizer' width='152' height='32'></canvas>
+      </div>
+      <div className='media-info'>
+        <Marquee />
+        <Kbps />
+        <Khz />
+        <MonoStereo />
+      </div>
+      <Volume />
+      <Balance />
+      <div className='windows'>
+        <div id='equalizer-button'></div>
+        <div id='playlist-button'></div>
+      </div>
+      <Position mediaPlayer={props.mediaPlayer} />
+      <Actions mediaPlayer={props.mediaPlayer} />
+      <Eject />
+      <div className='shuffle-repeat'>
+        <Shuffle />
+        <Repeat />
+      </div>
+      <a id='about' target='blank' href= 'https://github.com/captbaritone/winamp2-js'></a>
     </div>
-    <div className='media-info'>
-      <Marquee />
-      <Kbps />
-      <Khz />
-      <MonoStereo />
-    </div>
-    <Volume />
-    <Balance />
-    <div className='windows'>
-      <div id='equalizer-button'></div>
-      <div id='playlist-button'></div>
-    </div>
-    <Position mediaPlayer={props.mediaPlayer} />
-    <Actions mediaPlayer={props.mediaPlayer} />
-    <Eject />
-    <div className='shuffle-repeat'>
-      <Shuffle />
-      <Repeat />
-    </div>
-    <a id='about' target='blank' href= 'https://github.com/captbaritone/winamp2-js'></a>
-  </div>;
+  </DragTarget>;
 };
 
 module.exports = connect(state => state)(MainWindow);
diff --git a/js/main-window.js b/js/main-window.js
index 0fd5a914..a57ecc18 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -30,27 +30,5 @@ module.exports = {
     this.nodes.visualizer.onclick = function() {
       self.winamp.toggleVisualizer();
     };
-
-    this.nodes.window.addEventListener('dragenter', this.dragenter.bind(this));
-    this.nodes.window.addEventListener('dragover', this.dragover.bind(this));
-    this.nodes.window.addEventListener('drop', this.drop.bind(this));
-  },
-
-  dragenter: function(e) {
-    e.stopPropagation();
-    e.preventDefault();
-  },
-
-  dragover: function(e) {
-    e.stopPropagation();
-    e.preventDefault();
-  },
-
-  drop: function(e) {
-    e.stopPropagation();
-    e.preventDefault();
-    var dt = e.dataTransfer;
-    var file = dt.files[0];
-    this.winamp.loadFromFileReference(file);
   }
 };