Skip to content
This repository was archived by the owner on Aug 6, 2018. It is now read-only.

Commit 1241a91

Browse files
nervetattoonervetattoo
committed
Make search and upload work everywhere by sharing implementation
1 parent 02385d5 commit 1241a91

File tree

3 files changed

+79
-93
lines changed

3 files changed

+79
-93
lines changed

‎resources/mediaflow-ng.js

Lines changed: 55 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -34,41 +34,63 @@ mediaflow.filter('sizeConverter', function () {
3434
}
3535
});
3636

37-
mediaflow.controller('MediaFlowFieldCtrl', function ($scope, $http, $upload) {
37+
mediaflow.controller('MediaFlowCtrl', function ($scope, $http, $upload) {
3838
$scope.connection = true;
39-
$scope.showMedia = false;
40-
$scope.spin = false;
41-
$scope.searchText = '';
4239
$scope.media = [];
43-
40+
$scope.spin = true;
41+
$scope.searchText = '';
4442
$scope.testConnection = function () {
4543
$http.get('/admin/mediaflow/check').success(function (result) {
4644
$scope.connection = result;
4745
});
4846
};
49-
5047
$scope.testConnection();
5148

5249
$scope.getMedia = function (search) {
5350
var url = '/admin/mediaflow/media';
5451
var config = {};
5552
if (search) config.params = {q: search};
56-
$scope.spin = true;
57-
$http.get(url, config).success(function (result) {
58-
$scope.media = result;
59-
$scope.spin = false;
60-
});
53+
return $http.get(url, config);
6154
};
6255

63-
$scope.getMedia();
56+
$scope.onFileSelect = function($files) {
57+
$scope.spin = true;
58+
for (var i = 0; i < $files.length; i++) {
59+
var $file = $files[i];
60+
$scope.upload = $upload.upload({
61+
url: '/admin/mediaflow/upload',
62+
file: $file
63+
}).then(function(args) {
64+
$scope.media.unshift(args.data);
65+
$scope.spin = false;
66+
}, function(args) {
67+
console.log('err', args);
68+
$scope.spin = false;
69+
});
70+
}
71+
}
72+
});
73+
74+
mediaflow.controller('MediaFlowFieldCtrl', function ($scope, $http, $upload) {
75+
$scope.showMedia = false;
76+
77+
var updateMedia = function(search) {
78+
$scope.spin = true;
79+
$scope
80+
.getMedia(search)
81+
.success(function(results) {
82+
$scope.media.splice
83+
.bind($scope.media, 0, $scope.media.length - 1)
84+
.apply($scope.media, results);
85+
$scope.spin = false;
86+
});
87+
};
88+
updateMedia();
6489

6590
$scope.$watch('searchText', function(searchText, ov) {
66-
if (searchText === ov) return;
67-
setTimeout(function() {
68-
if (searchText == $scope.searchText) {
69-
$scope.getMedia($scope.searchText);
70-
}
71-
}, 250);
91+
if (searchText !== ov) {
92+
setTimeout(updateMedia, 250, searchText);
93+
}
7294
});
7395

7496
$scope.select = function (medium) {
@@ -85,73 +107,27 @@ mediaflow.controller('MediaFlowFieldCtrl', function ($scope, $http, $upload) {
85107
if (!$el) { return; }
86108
$el.click();
87109
};
88-
89-
$scope.onFileSelect = function($files) {
90-
$scope.spin = true;
91-
for (var i = 0; i < $files.length; i++) {
92-
var $file = $files[i];
93-
$scope.upload = $upload.upload({
94-
url: '/admin/mediaflow/upload',
95-
file: $file,
96-
progress: function(evt) {
97-
// TODO
98-
}
99-
}).then(function(args) {
100-
$scope.media.unshift(args.data);
101-
$scope.spin = false;
102-
}, function(args) {
103-
console.log('err', args);
104-
$scope.spin = false;
105-
});
106-
}
107-
}
108110
});
109111

110112
mediaflow.controller('MediaFlowBrowseCtrl', function ($scope, $http, $upload) {
111-
$scope.connection = true;
112-
$scope.searching = false;
113-
$scope.searchText = '';
114113
$scope.view = 'list';
115-
$scope.media = [];
116-
$scope.testConnection = function () {
117-
$http.get('/admin/mediaflow/check').success(function (result) {
118-
$scope.connection = result;
119-
});
120-
};
121-
$scope.testConnection();
122-
$scope.getMedia = function (search) {
123-
var url = '/admin/mediaflow/media';
124-
var config = {};
125-
if (search) config.params = {q: search};
126-
$scope.searching = true;
127-
$http.get(url, config).success(function (result) {
128-
$scope.media = result;
129-
$scope.searching = false;
130-
});
114+
115+
var updateMedia = function(search) {
116+
$scope.spin = true;
117+
$scope
118+
.getMedia(search)
119+
.success(function(results) {
120+
$scope.media.splice
121+
.bind($scope.media, 0, $scope.media.length - 1)
122+
.apply($scope.media, results);
123+
$scope.spin = false;
124+
});
131125
};
132-
$scope.getMedia();
126+
updateMedia();
133127

134128
$scope.$watch('searchText', function(searchText, ov) {
135-
if (searchText === ov) return;
136-
setTimeout(function() {
137-
if (searchText == $scope.searchText) {
138-
$scope.getMedia($scope.searchText);
139-
}
140-
}, 250);
141-
});
142-
143-
$scope.onFileSelect = function($files) {
144-
for (var i = 0; i < $files.length; i++) {
145-
var $file = $files[i];
146-
$scope.upload = $upload.upload({
147-
url: '/admin/mediaflow/upload',
148-
file: $file,
149-
progress: function(evt) {
150-
// TODO
151-
}
152-
}).success(function(data, status, headers, config) {
153-
$scope.getMedia();
154-
});
129+
if (searchText !== ov) {
130+
setTimeout(updateMedia, 250, searchText);
155131
}
156-
}
132+
});
157133
});

‎templates/index.html

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@
88

99
{% set content %}
1010

11-
<div ng-app="mediaflow" ng-controller="MediaFlowBrowseCtrl">
11+
<div ng-app="mediaflow" ng-controller="MediaFlowCtrl">
1212
<div ng-hide="connection" class="error ng-cloak">
1313
Failed to connect to Mediaflow using current settings
1414
</div>
15-
<div ng-show="connection" id="content" class="content has-sidebar" style="min-height: 80px;">
15+
<div ng-show="connection" id="content"
16+
class="content has-sidebar"
17+
ng-controller="MediaFlowBrowseCtrl">
1618
<div class="resize-triggers">
1719
<div class="expand-trigger">
1820
<div style="width: 1025px; height: 191px;"></div>
@@ -26,14 +28,23 @@
2628
</div>
2729
<div class="contract-trigger"></div>
2830
</div>
29-
<div class="buttons first"><input type="file" multiple="multiple" name="assets-upload"
30-
style="display: none;">
31-
32-
<div class="btn submit assets-upload-button" data-icon="↑" style="position: relative; overflow: hidden;"
33-
role="button"><label for="mediaflow_file_upload">Upload files</label>
34-
35-
<input style="display:none" id="mediaflow_file_upload" type="file" ng-file-select="onFileSelect($files)" multiple>
36-
31+
<div class="buttons first">
32+
<input type="file"
33+
multiple="multiple"
34+
name="assets-upload"
35+
style="display: none;">
36+
<div class="btn submit assets-upload-button"
37+
data-icon="↑"
38+
style="position: relative; overflow: hidden;"
39+
role="button"
40+
>
41+
<label for="mediaflow_file_upload">Upload files</label>
42+
<input style="display:none"
43+
id="mediaflow_file_upload"
44+
type="file"
45+
ng-file-select="onFileSelect($files)"
46+
multiple
47+
>
3748
</div>
3849
</div>
3950
<nav>
@@ -70,8 +81,7 @@
7081
</tr>
7182
</tbody>
7283
</table>
73-
<div class="spinner hidden" ng-class="{hidden: !searching}">
74-
</div>
84+
<div class="spinner hidden" ng-class="{hidden: !spin}"></div>
7585
</div>
7686

7787
<div class="elements" ng-show="view==='list'">

‎templates/input.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div class="mediaflow-app" ng-controller="MediaFlowFieldCtrl" id="{{id}}">
1+
<div class="mediaflow-app" ng-controller="MediaFlowCtrl">
22
<div ng-hide="connection" class="error" class="ng-cloak">
33
Failed to connect to Mediaflow using current settings
44
</div>
5-
<div ng-show="connection">
5+
<div ng-show="connection" ng-controller="MediaFlowFieldCtrl">
66
<div class="mediaflow-preview clearafter">
77
<div class="thumb" ng-class="{empty:!selected}">
88
<img ng-src="[[selected.thumbnailUrl]]" ng-show="selected">

0 commit comments

Comments
 (0)