feat: dynamically disable drop area

flowjs · Feb 4, 2014 · 79bca59 · 79bca59
1 parent 3ed45ec
commit 79bca59
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -89,13 +89,21 @@ Use `flow-prevent-drop` directive on `body` element:
 ### How to add some styles while dropping a file?
 Use `flow-drag-enter` directive:
 ````html
-<div flow-drag-enter="style={border:'4px solid green'}"  flow-drag-leave="style={}"
+<div flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}"
      ng-style="style">
 </div>
 ````
-
 Note: `flow-drag-leave` attribute can't be used alone, it is a part of `flow-drag-enter` directive.
 
+### How to dynamically disable drop area?
+````html
+<div class="alert" flow-drop flow-drop-enabled="config.enabled">
+    Drag And Drop your file here
+</div>
+````
+See example at `samples/dataurl/`.
+
+
 How can I preview uploaded image?
 ============
 

diff --git a/samples/dataurl/app.js b/samples/dataurl/app.js
@@ -0,0 +1,50 @@
+/*global angular */
+'use strict';
+
+/**
+ * The main app module
+ * @name app
+ * @type {angular.Module}
+ */
+var app = angular.module('app', ['flow'])
+.config(['flowFactoryProvider', function (flowFactoryProvider) {
+  flowFactoryProvider.defaults = {
+    target: 'upload.php',
+    permanentErrors: [404, 500, 501],
+    maxChunkRetries: 1,
+    chunkRetryInterval: 5000,
+    simultaneousUploads: 4
+  };
+  flowFactoryProvider.on('catchAll', function (event) {
+    console.log('catchAll', arguments);
+  });
+  // Can be used with different implementations of Flow.js
+  // flowFactoryProvider.factory = fustyFlowFactory;
+}]).directive('appDownloadUrl', [function () {
+  return {
+    restrict: 'A',
+    link: function(scope, element, attrs) {
+      element.bind('dragstart', function (event) {
+        var config = scope.$eval(attrs.appDownloadUrl);
+        if (!config.disabled) {
+          var data = config.mime + ':' + config.name + ':' + window.location.href + config.url;
+          event.dataTransfer.setData('DownloadURL', data);
+        }
+      });
+    }
+  };
+}]).directive("appDragstart", [function () {
+  return function(scope, element, attrs) {
+    element.bind('dragstart', function (event) {
+      scope.$eval(attrs.appDragstart);
+    });
+  }
+}]).directive("appDragend", [function () {
+  return function(scope, element, attrs) {
+    element.bind('dragend', function (event) {
+      scope.$eval(attrs.appDragend);
+    });
+  }
+}]).run(function ($rootScope) {
+  $rootScope.dropEnabled = true;
+});
diff --git a/samples/dataurl/flow.png b/samples/dataurl/flow.png
diff --git a/samples/dataurl/index.html b/samples/dataurl/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html ng-app="app" flow-init>
+<head>
+  <title>Download url</title>
+  <script src="../../bower_components/angular/angular.js"></script>
+  <script src="../../bower_components/flow.js/src/flow.js"></script>
+  <script src="../../src/angular-flow.js"></script>
+  <script src="../../src/provider.js"></script>
+  <script src="../../src/directives/btn.js"></script>
+  <script src="../../src/directives/drop.js"></script>
+  <script src="../../src/directives/drag-events.js"></script>
+  <script src="../../src/directives/init.js"></script>
+  <script src="../../src/directives/events.js"></script>
+  <script src="../../src/directives/transfers.js"></script>
+  <script src="../../src/directives/img.js"></script>
+  <script src="app.js"></script>
+  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
+        rel="stylesheet"/>
+</head>
+<body flow-prevent-drop
+      flow-drag-enter="style={border: '5px solid green'}"
+      flow-drag-leave="style={}"
+      ng-style="style">
+<div class="container">
+  <h1>Flow drag & drop and drop to desktop feature</h1>
+  <h2>Chrome browser only</h2>
+  <hr class="soften"/>
+
+  <div class="alert" flow-drop flow-drag-enter="class='alert-success'" flow-drag-leave="class=''" ng-class="dropEnabled && class"
+       flow-drop-enabled="dropEnabled"
+       style="text-align: center; padding: 100px 0;" >
+    Drag And Drop your file here<br/>
+    <a class="btn btn-default"
+       draggable="true"
+       app-dragstart="dropEnabled=false"
+       app-dragend="dropEnabled=true"
+       app-download-url="{name:'flow.png', mime: 'image/png', url: 'flow.png'}">
+        Drag "flow.png" to desktop
+    </a>
+  </div>
+
+  <ul>
+    <li ng-repeat="file in $flow.files">{{file.name}}</li>
+  </ul>
+</div>
+</body>
+</html>
diff --git a/src/directives/drop.js b/src/directives/drop.js
@@ -4,7 +4,23 @@ angular.module('flow.drop', ['flow.init'])
     'scope': false,
     'require': '^flowInit',
     'link': function(scope, element, attrs) {
-      scope.$flow.assignDrop(element);
+      if (attrs.flowDropEnabled) {
+        scope.$watch(attrs.flowDropEnabled, function (value) {
+          if (value) {
+            assignDrop();
+          } else {
+            unAssignDrop();
+          }
+        });
+      } else {
+        assignDrop();
+      }
+      function assignDrop() {
+        scope.$flow.assignDrop(element);
+      }
+      function unAssignDrop() {
+        scope.$flow.unAssignDrop(element);
+      }
     }
   };
 });