drag wip

app/components/controls/music-control.js

@@ -162,9 +162,20 @@ export default Em.Component.extend(musicControlMixin, {
     clickSpeaker: function(){
       // simulate the speaker vibration by running a CSS animation on it
       Em.$('#beatSpeakerCenter').removeClass('pop').prop('offsetWidth', Em.$('#beatSpeakerCenter').prop('offsetWidth')).addClass('pop');
+    },
+    audioDrop: function(){
+      debugger;
     }
   },
 
+  dragOver: function(){
+    this.set('dragging', true);
+  },
+
+  dragLeave: function(){
+    this.set('dragging', false);
+  },
+
   changePlayerControl: function(name, value, isOption){
     if(isOption){
       var options = {};
@@ -292,6 +303,7 @@ export default Em.Component.extend(musicControlMixin, {
     Em.$('#beatSpeakerContainer').on('mousedown', '#beatSpeakerCenter', function(event) {
       event.preventDefault();
     });
+    // control the volume by scrolling up/down
     Em.$('#playerArea').on('mousewheel', function(event) {
       var scrollSize = 5;
 
@@ -301,6 +313,22 @@ export default Em.Component.extend(musicControlMixin, {
       self.send('volumeChanged', self.get('volume') + scrollSize);
       event.preventDefault();
     });
+    // file drag and drop support
+    //Em.$('.dragArea').on(
+    //  'dragover',
+    //  function(e) {
+    //    console.log('dragover');
+    //    e.preventDefault();
+    //    e.stopPropagation();
+    //  }
+    //).on(
+    //  'dragenter',
+    //  function(e) {
+    //    console.log('dragenter');
+    //    e.preventDefault();
+    //    e.stopPropagation();
+    //  }
+    //);
   },
 
   // component clean up

app/components/mixins/music-control.js

@@ -58,6 +58,8 @@ export default Em.Mixin.create({
   timeElapsed: 0,
   timeTotal: 0,
 
+  dragging: false,
+
   playQueueEmpty: Em.computed.empty('playQueue'),
   playQueueNotEmpty: Em.computed.notEmpty('playQueue'),
   playQueueMultiple: function(){

app/styles/app.scss

@@ -585,3 +585,8 @@ md-toolbar {
   padding: 10px;
   box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.1);
 }
+
+.dragHere {
+  background-color: white !important;
+  border: 5px dotted #5383ff;
+}

app/templates/components/controls/music-control.hbs

@@ -42,7 +42,7 @@
                   class="pull-right" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
         </div>
 
-        <div id="playListArea" class="cursorPointer" {{action "playListAreaAddAudio"}}>
+        <div id="playListArea" class="cursorPointer dragArea {{if dragging "dragHere"}}" {{action "playListAreaAddAudio"}}>
             {{#if playQueueEmpty}}
                 <div id="dragHere">Drag your music files here</div>
                 {{paper-icon icon="library-music"}}