Skip to content

Commit cf9c507

Browse files
darryldecodedarryldecode
committed
patch for outdated media browser dialog which is now updated to to use elFinder..
1 parent ef146dc commit cf9c507

File tree

4 files changed

+72
-200
lines changed

4 files changed

+72
-200
lines changed

‎src/Darryldecode/Backend/Components/Media/Controllers/MediaController.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ public function elFinder()
6363
array(
6464
'driver' => 'LocalFileSystem', // driver for accessing file system (REQUIRED)
6565
'path' => storage_path('app/public'), // path to files (REQUIRED)
66-
'URL' => public_path('storage'), // URL to files (REQUIRED)
66+
'URL' => url('storage'), // URL to files (REQUIRED)
6767
'uploadDeny' => config('backend.backend.upload_rules.uploadDeny'), // All Mimetypes not allowed to upload
6868
'uploadAllow' => config('backend.backend.upload_rules.uploadAllow'), // Mimetype `image` and `text/plain` allowed to upload
6969
'uploadOrder' => config('backend.backend.upload_rules.uploadOrder'), // allowed Mimetype `image` and `text/plain` only

‎src/Darryldecode/Backend/Public/backend/cb/app/contents/controller.contents.js‎

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -204,17 +204,12 @@ angular.module('cb.group').controller('ContentsController', ['$scope','$timeout'
204204
});
205205

206206
m.result.then(function (selectedFiles) {
207-
208-
for(var prop in selectedFiles) {
209-
if( selectedFiles[prop] == true ) {
210-
var imageSrc = STORAGE_URL + prop;
211-
$scope.content.customFields[formGroup][galleryFieldName].push({
212-
relativePath: prop,
213-
fullPath: imageSrc
214-
});
215-
}
216-
}
217-
207+
angular.forEach(selectedFiles,function(item) {
208+
$scope.content.customFields[formGroup][galleryFieldName].push({
209+
relativePath: item.relative_path,
210+
fullPath: item.url
211+
});
212+
});
218213
});
219214
};
220215

@@ -257,19 +252,11 @@ angular.module('cb.group').controller('ContentsController', ['$scope','$timeout'
257252
});
258253

259254
m.result.then(function (selectedFiles) {
260-
for(var prop in selectedFiles) {
261-
262-
if( $scope.image.limit > 1 ) continue;
263255

264-
if( selectedFiles[prop] == true ) {
265-
var imageSrc = STORAGE_URL + prop;
266-
$scope.content.customFields[formGroup][imageFieldName].push({
267-
relativePath: prop,
268-
fullPath: imageSrc
269-
});
270-
$scope.image.limit++;
271-
}
272-
}
256+
$scope.content.customFields[formGroup][imageFieldName].push({
257+
relativePath: selectedFiles[0].relative_path,
258+
fullPath: selectedFiles[0].url
259+
});
273260
});
274261
};
275262

@@ -318,12 +305,9 @@ angular.module('cb.group').controller('ContentsController', ['$scope','$timeout'
318305
});
319306

320307
m.result.then(function (selectedFiles) {
321-
for(var prop in selectedFiles) {
322-
if( selectedFiles[prop] == true ) {
323-
var imageSrc = STORAGE_URL + prop;
324-
ed.execCommand('mceInsertContent', false, "<img src='"+imageSrc+"'>");
325-
}
326-
}
308+
angular.forEach(selectedFiles,function(item) {
309+
ed.execCommand('mceInsertContent', false, "<img src='"+item.url+"'>");
310+
});
327311
});
328312
}
329313
});

‎src/Darryldecode/Backend/Public/backend/cb/app/contents/modals/controller.gallery.js‎

Lines changed: 52 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,61 @@
1-
angular.module('cb.content').controller('GalleryModalController', ['$scope','$timeout','$window','$filter','$modal','$modalInstance','GlobalLoaderService','AlertService','MediaManagerFactory', function ($scope,$timeout,$window,$filter,$modal,$modalInstance,GlobalLoaderService,AlertService,MediaManagerFactory) {
1+
angular.module('cb.content').controller('GalleryModalController', ['$scope','$timeout','$window','$filter','$modal','$modalInstance','GlobalLoaderService','AlertService','_CSRF', function ($scope,$timeout,$window,$filter,$modal,$modalInstance,GlobalLoaderService,AlertService,_CSRF) {
22

33
console.log('GalleryModalController Init');
44

55
// files
6-
$scope.files = [];
7-
8-
/**
9-
* Media Manager
10-
*
11-
* @type {{}}
12-
*/
13-
$scope.mediaManager = {};
14-
$scope.mediaManager.currentPath = '';
15-
$scope.mediaManager.paths = [];
16-
$scope.mediaManager.isDoing = false;
17-
$scope.mediaManager.isEmpty = true;
18-
19-
// list dir handle from folder click
20-
$scope.mediaManager.ls = function (path) {
21-
if (path == '/' ) {
22-
queryFiles('/');
23-
} else {
24-
queryFiles(path);
25-
}
26-
};
27-
28-
// list dir handle from breadcrumbs click
29-
$scope.mediaManager.lsBc = function (index) {
30-
31-
var copiedPaths = angular.copy($scope.mediaManager.paths);
32-
33-
copiedPaths.splice(index + 1, copiedPaths.length);
34-
35-
copiedPaths.shift();
36-
37-
queryFiles('/'+copiedPaths.join('/'));
38-
};
39-
40-
// modal control
41-
// -----------------------------
42-
43-
// the selected files
44-
$scope.selectedFiles = [];
45-
46-
// handles modal ok button and pass the selected images
47-
$scope.ok = function () {
48-
$modalInstance.close($scope.selectedFiles);
49-
};
50-
51-
// handles modal cancel button, nothing here, just cancels the modal
52-
$scope.cancel = function () {
53-
$modalInstance.dismiss('cancel');
54-
};
55-
56-
/**
57-
* Uploader
58-
*
59-
* @type {{}}
60-
*/
61-
$scope.uploader = {};
62-
$scope.uploader.files = [];
63-
64-
// watch the files values so if it changes we can trigger upload
65-
$scope.$watch('uploader.files', function () {
66-
upload($scope.uploader.files, {path: $scope.mediaManager.currentPath});
67-
});
68-
69-
// just a helper on view
70-
$scope.getLastSegment = function (path) {
71-
72-
var separators = ["/","\\\\"];
73-
74-
return path.split(new RegExp(separators.join('|'), 'g')).pop();
75-
};
76-
77-
// get size name. Eg. ( name_large.jpg -> large )
78-
$scope.getSizeName = function(path) {
79-
var sizeName = 'Original';
80-
var fileName = $scope.getLastSegment(path);
81-
82-
if( isImage(fileName) ) {
83-
var f = fileName.split('_');
84-
if(f.length >= 2) {
85-
sizeName = f[f.length - 1].split('.')[0];
6+
$scope.media = {
7+
8+
init: function() {
9+
10+
var opts = {
11+
url : '/backend/media/elFinder',
12+
customData: {'_token': _CSRF},
13+
getFileCallback: function(file) {
14+
console.log('getFileCallback');
15+
console.log(file);
16+
},
17+
handlers : {
18+
select : function(event, elfinderInstance) {
19+
var selected = event.data.selected;
20+
if (selected.length) {
21+
22+
// empty first to make sure no duplicates
23+
$scope.media.data.selectedFiles = [];
24+
25+
// iterate to all selected items and push it to selectedFiles
26+
angular.forEach(selected,function(item) {
27+
$scope.$apply(function() {
28+
$scope.media.data.selectedFiles.push({
29+
file: elfinderInstance.file(item),
30+
relative_path: elfinderInstance.path(item).replace('public\\','\\'), // remove public from path
31+
url: elfinderInstance.url(item).replace('/storage/public','/storage') // remove public from path
32+
});
33+
});
34+
});
35+
}
36+
}
37+
}
38+
};
39+
40+
$timeout(function() {
41+
angular.element('#media-loader').hide();
42+
angular.element('#elfinder').elfinder(opts);
43+
},3000);
44+
},
45+
46+
data: {
47+
selectedFiles: []
48+
},
49+
50+
buttons: {
51+
ok: function () {
52+
$modalInstance.close($scope.media.data.selectedFiles);
53+
},
54+
cancel: function () {
55+
$modalInstance.dismiss('cancel');
8656
}
8757
}
88-
89-
return sizeName;
90-
91-
function isImage(src) {
92-
return (/(.*)\.(?:jpe?g|gif|png)$/i).test(src);
93-
}
9458
};
9559

96-
// uploads the files
97-
function upload (files, path) {
98-
if (files && files.length) {
99-
for (var i = 0; i < files.length; i++) {
100-
var file = files[i];
101-
MediaManagerFactory.upload(file, path).progress(function (evt) {
102-
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
103-
console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
104-
}).success(function (data, status, headers, config) {
105-
queryFiles($scope.mediaManager.currentPath);
106-
});
107-
}
108-
}
109-
}
110-
111-
// query files in a given dir
112-
function queryFiles (path) {
113-
MediaManagerFactory.ls({path:path}).then(function (success) {
114-
$scope.files = success.data.data;
115-
$scope.mediaManager.currentPath = $scope.files.current_path;
116-
$scope.mediaManager.paths = $scope.files.paths;
117-
$scope.mediaManager.isEmpty = $scope.files.is_empty;
118-
}, function (error) {
119-
GlobalLoaderService.show(error.data.message || 'An error has occurred.','danger').hide(4000);
120-
});
121-
}
122-
queryFiles('/');
60+
$scope.media.init();
12361
}]);

‎src/Darryldecode/Backend/Public/backend/cb/app/contents/modals/gallery.html‎

Lines changed: 6 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,21 @@
11
<div class="media-pop-up">
22
<div class="modal-header">
3-
<div class="row">
3+
<div class="row view-header">
44
<div class="col-lg-6 col-md-6">
55
<h3>
6-
<i class="fa fa-files-o"></i> MEDIA MANAGER
6+
<i class="fa fa-files-o"></i> MEDIA
77
</h3>
88
</div>
99
<div class="col-lg-6 col-md-6">
10-
<div class="control-panel text-right">
11-
<div class="button btn btn-default" data-ng-file-select data-ng-model="uploader.files" data-ng-multiple="true">
12-
<i class="fa fa-upload"></i>
13-
</div>
14-
</div>
1510
</div>
1611
</div>
1712
</div>
1813
<div class="modal-body">
19-
20-
<!-- list files types -->
21-
<div class="panel panel-default">
22-
<div class="panel-body">
23-
<div class="row view-header-secondary">
24-
<div class="col-lg-6 col-md-6">
25-
<ol class="breadcrumb">
26-
<li>
27-
<a data-ng-click="mediaManager.ls('/')" href=""><i class="fa fa-home"></i></a>
28-
</li>
29-
<li data-ng-repeat="path in files.paths" data-ng-if="$index!=0" class="bc-item">
30-
<a data-ng-click="mediaManager.lsBc($index)" href="">{{path}}</a>
31-
</li>
32-
</ol>
33-
</div>
34-
<div class="col-lg-6 col-md-6">
35-
</div>
36-
</div>
37-
<div class="row">
38-
<div data-ng-if="mediaManager.isEmpty" class="alert text-center">
39-
No files..
40-
</div>
41-
<div data-ng-repeat="f in files.directories" class="col-lg-3 col-md-3 col-sm-4">
42-
<div class="file-thumb">
43-
<i class="fa fa-folder fa-thumb-icon"></i>
44-
<div class="text-wrap meta-data-holder trim-info-xs">
45-
<a data-ng-click="mediaManager.ls(f)" href="" class="file-name">{{getLastSegment(f)}}</a>
46-
</div>
47-
</div>
48-
</div>
49-
<div data-ng-repeat="f in files.files" class="col-lg-3 col-md-3 col-sm-4">
50-
<div class="file-thumb">
51-
<label class="label label-info pull-left label-file-size">Size: {{::getSizeName(f)}}</label>
52-
<div class="gallery-select-control">
53-
<input data-ng-model="selectedFiles[f]" type="checkbox">
54-
</div>
55-
<file-preview file-source="{{f}}"></file-preview>
56-
<div class="text-wrap meta-data-holder trim-info-xs">
57-
<a href="" data-toggle="tooltip" data-placement="bottom" title="{{f}}" class="file-name">{{::getLastSegment(f)}}</a>
58-
</div>
59-
</div>
60-
</div>
61-
</div>
62-
</div>
63-
</div>
64-
<!-- /list files types -->
65-
14+
<div id="media-loader" class="text-center"><i class="fa fa-spinner fa-spin"></i> Opening Media Manager</div>
15+
<div id="elfinder"></div>
6616
</div>
6717
<div class="modal-footer">
68-
<button class="btn btn-default btn-xs" data-ng-click="ok()">OK</button>
69-
<button class="btn btn-warning btn-xs" data-ng-click="cancel()">Cancel</button>
18+
<button class="btn btn-default btn-xs" data-ng-click="media.buttons.ok()">OK</button>
19+
<button class="btn btn-warning btn-xs" data-ng-click="media.buttons.cancel()">Cancel</button>
7020
</div>
7121
</div>

0 commit comments

Comments
 (0)