Skip to content

Commit 79bca59

Browse files
AidasKAidasK
committed
feat: dynamically disable drop area
1 parent 3ed45ec commit 79bca59

File tree

5 files changed

+124
-3
lines changed

5 files changed

+124
-3
lines changed

‎README.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,21 @@ Use `flow-prevent-drop` directive on `body` element:
8989
### How to add some styles while dropping a file?
9090
Use `flow-drag-enter` directive:
9191
````html
92-
<div flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}"
92+
<div flow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}"
9393
ng-style="style">
9494
</div>
9595
````
96-
9796
Note: `flow-drag-leave` attribute can't be used alone, it is a part of `flow-drag-enter` directive.
9897

98+
### How to dynamically disable drop area?
99+
````html
100+
<div class="alert" flow-drop flow-drop-enabled="config.enabled">
101+
Drag And Drop your file here
102+
</div>
103+
````
104+
See example at `samples/dataurl/`.
105+
106+
99107
How can I preview uploaded image?
100108
============
101109

‎samples/dataurl/app.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/*global angular */
2+
'use strict';
3+
4+
/**
5+
* The main app module
6+
* @name app
7+
* @type {angular.Module}
8+
*/
9+
var app = angular.module('app', ['flow'])
10+
.config(['flowFactoryProvider', function (flowFactoryProvider) {
11+
flowFactoryProvider.defaults = {
12+
target: 'upload.php',
13+
permanentErrors: [404, 500, 501],
14+
maxChunkRetries: 1,
15+
chunkRetryInterval: 5000,
16+
simultaneousUploads: 4
17+
};
18+
flowFactoryProvider.on('catchAll', function (event) {
19+
console.log('catchAll', arguments);
20+
});
21+
// Can be used with different implementations of Flow.js
22+
// flowFactoryProvider.factory = fustyFlowFactory;
23+
}]).directive('appDownloadUrl', [function () {
24+
return {
25+
restrict: 'A',
26+
link: function(scope, element, attrs) {
27+
element.bind('dragstart', function (event) {
28+
var config = scope.$eval(attrs.appDownloadUrl);
29+
if (!config.disabled) {
30+
var data = config.mime + ':' + config.name + ':' + window.location.href + config.url;
31+
event.dataTransfer.setData('DownloadURL', data);
32+
}
33+
});
34+
}
35+
};
36+
}]).directive("appDragstart", [function () {
37+
return function(scope, element, attrs) {
38+
element.bind('dragstart', function (event) {
39+
scope.$eval(attrs.appDragstart);
40+
});
41+
}
42+
}]).directive("appDragend", [function () {
43+
return function(scope, element, attrs) {
44+
element.bind('dragend', function (event) {
45+
scope.$eval(attrs.appDragend);
46+
});
47+
}
48+
}]).run(function ($rootScope) {
49+
$rootScope.dropEnabled = true;
50+
});

‎samples/dataurl/flow.png‎

17.4 KB
Loading

‎samples/dataurl/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html ng-app="app" flow-init>
3+
<head>
4+
<title>Download url</title>
5+
<script src="../../bower_components/angular/angular.js"></script>
6+
<script src="../../bower_components/flow.js/src/flow.js"></script>
7+
<script src="../../src/angular-flow.js"></script>
8+
<script src="../../src/provider.js"></script>
9+
<script src="../../src/directives/btn.js"></script>
10+
<script src="../../src/directives/drop.js"></script>
11+
<script src="../../src/directives/drag-events.js"></script>
12+
<script src="../../src/directives/init.js"></script>
13+
<script src="../../src/directives/events.js"></script>
14+
<script src="../../src/directives/transfers.js"></script>
15+
<script src="../../src/directives/img.js"></script>
16+
<script src="app.js"></script>
17+
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
18+
rel="stylesheet"/>
19+
</head>
20+
<body flow-prevent-drop
21+
flow-drag-enter="style={border: '5px solid green'}"
22+
flow-drag-leave="style={}"
23+
ng-style="style">
24+
<div class="container">
25+
<h1>Flow drag & drop and drop to desktop feature</h1>
26+
<h2>Chrome browser only</h2>
27+
<hr class="soften"/>
28+
29+
<div class="alert" flow-drop flow-drag-enter="class='alert-success'" flow-drag-leave="class=''" ng-class="dropEnabled && class"
30+
flow-drop-enabled="dropEnabled"
31+
style="text-align: center; padding: 100px 0;" >
32+
Drag And Drop your file here<br/>
33+
<a class="btn btn-default"
34+
draggable="true"
35+
app-dragstart="dropEnabled=false"
36+
app-dragend="dropEnabled=true"
37+
app-download-url="{name:'flow.png', mime: 'image/png', url: 'flow.png'}">
38+
Drag "flow.png" to desktop
39+
</a>
40+
</div>
41+
42+
<ul>
43+
<li ng-repeat="file in $flow.files">{{file.name}}</li>
44+
</ul>
45+
</div>
46+
</body>
47+
</html>

‎src/directives/drop.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,23 @@ angular.module('flow.drop', ['flow.init'])
44
'scope': false,
55
'require': '^flowInit',
66
'link': function(scope, element, attrs) {
7-
scope.$flow.assignDrop(element);
7+
if (attrs.flowDropEnabled) {
8+
scope.$watch(attrs.flowDropEnabled, function (value) {
9+
if (value) {
10+
assignDrop();
11+
} else {
12+
unAssignDrop();
13+
}
14+
});
15+
} else {
16+
assignDrop();
17+
}
18+
function assignDrop() {
19+
scope.$flow.assignDrop(element);
20+
}
21+
function unAssignDrop() {
22+
scope.$flow.unAssignDrop(element);
23+
}
824
}
925
};
1026
});

0 commit comments

Comments
 (0)