changeset 3097:c8707694f4e7

#200 Dragging audio onto the page element will add the audio fragment to that page.

--- a/test_create.html	Fri Jan 12 23:31:29 2018 +0000
+++ b/test_create.html	Tue Jan 16 14:33:07 2018 +0000
@@ -469,7 +469,7 @@
         <div style="text-align: center;">
             <button type="button" class="btn btn-success" ng-click="addPage()">Add Page</button>
         </div>
-        <div class="node pageNode" ng-controller="page" ng-repeat="page in specification.pages">
+        <div class="node pageNode" ng-controller="page" ng-repeat="page in specification.pages" dropzone>
             <h2>Page</h2>
             <button type="button" class="btn btn-danger" ng-click="removePage(page)">Remove Page</button>
             <div class="attributes">

--- a/test_create/test_core.js	Fri Jan 12 23:31:29 2018 +0000
+++ b/test_create/test_core.js	Tue Jan 16 14:33:07 2018 +0000
@@ -31,6 +31,42 @@
 
 var AngularInterface = angular.module("creator", []);
 
+AngularInterface.directive("dropzone", function () {
+    return {
+        restrict: "A",
+        link: function (scope, elem) {
+            elem.bind('dragover', function (evt) {
+                evt.stopPropagation();
+                evt.preventDefault();
+            });
+            elem.bind('dragend', function (evt) {
+                console.log(evt);
+                evt.stopPropagation();
+                evt.preventDefault();
+            });
+            elem.bind('drop', function (event) {
+                var evt = event.originalEvent;
+                console.log(evt);
+                evt.stopPropagation();
+                evt.preventDefault();
+
+                var files = evt.dataTransfer.files;
+                for (var i = 0, f; f = files[i]; i++) {
+                    var reader = new FileReader();
+                    reader.readAsArrayBuffer(f);
+
+                    reader.onload = (function (theFile) {
+                        return function (e) {
+                            scope.addAudioElementFromFile(theFile.name);
+                            scope.$apply();
+                        };
+                    })(f);
+                }
+            });
+        }
+    }
+});
+
 var specification = new Specification();
 
 window.onload = function () {
@@ -211,9 +247,9 @@
         }
     };
     $s.select = function (name) {
-        $s.selected = name;
-    }
-    // Get the test interface specifications
+            $s.selected = name;
+        }
+        // Get the test interface specifications
     $s.file = undefined;
     $s.description = "";
 
@@ -492,6 +528,10 @@
     $s.addAudioElement = function () {
         $s.page.addAudioElement();
     };
+    $s.addAudioElementFromFile = function (filename) {
+        var fragment = $s.page.addAudioElement();
+        fragment.url = filename;
+    };
     $s.removeAudioElement = function (element) {
         var index = $s.page.audioElements.findIndex(function (a) {
             return a == element;