jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fixup drag'n'drop

Browse Source
This commit is contained in:
Johannes Zellner
2022-09-02 15:16:00 +02:00
parent 3b8f1c2541
commit 4984e6b2b7
3 changed files with 54 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/filetree.html
View File

@@ -53,7 +53,7 @@
</table>
</div>
<div class="file-list" ng-class="{ 'entry-hovered': dropToBody, 'busy': busy }" context-menu="menuOptionsBlank" ng-mousedown="select($event, null)">
<div class="file-list" ng-class="{ 'entry-hovered': dropToBody, 'busy': busy }" context-menu="menuOptionsBlank" ng-mousedown="select($event, null)" ng-drop="drop($event, null)" ng-dragleave="dragExit($event, null)" ng-dragover="dragEnter($event, null)">
<table class="table table-hover" style="margin: 0;">
<tbody>
<tr ng-show="busy">

115
src/components/filetree.js
View File

@@ -61,8 +61,9 @@ function FileTreeController($scope, $translate, $timeout, Client) {
if (a.fileName.toLowerCase() < b.fileName.toLowerCase()) return -1;
return 1;
}).sort(function (a, b) {
if (a.isDirectory !== b.isDirectory) return 1;
return -1;
if ((a.isDirectory && b.isDirectory) || (!a.isDirectory && !b.isDirectory)) return 0;
if (a.isDirectory && !b.isDirectory) return -1;
return 1;
});
}
@@ -115,29 +116,13 @@ function FileTreeController($scope, $translate, $timeout, Client) {
Client.filesGet($scope.backendId, $scope.backendType, parentPath, 'data', function (error, result) {
if (error) return setTimeout(function () { openPath(path); }, 2000); // try again in some time
// amend icons
result.entries.forEach(function (e) {
e.icon = 'fa-file';
if (e.isDirectory) e.icon = 'fa-folder';
if (e.isSymbolicLink) e.icon = 'fa-link';
if (e.isFile) {
var mimeType = Mimer().get(e.fileName);
var mimeGroup = mimeType.split('/')[0];
if (mimeGroup === 'text') e.icon = 'fa-file-alt';
if (mimeGroup === 'image') e.icon = 'fa-file-image';
if (mimeGroup === 'video') e.icon = 'fa-file-video';
if (mimeGroup === 'audio') e.icon = 'fa-file-audio';
if (mimeType === 'text/csv') e.icon = 'fa-file-csv';
if (mimeType === 'application/pdf') e.icon = 'fa-file-pdf';
}
});
$scope.entries = result.entries;
sort();
// call itself now that we know
$scope.cwd = parentPath;
$scope.entries = result.entries;
amendIcons();
sort();
openPath(path);
});
}
@@ -155,8 +140,8 @@ function FileTreeController($scope, $translate, $timeout, Client) {
}
$scope.dragStart = function ($event, entry) {
$event.originalEvent.dataTransfer.setData('text/plain', entry.fileName);
$event.originalEvent.dataTransfer.setData('application/cloudron-filemanager', entry.fileName);
var filePath = sanitize($scope.cwd + '/' + entry.fileName);
$event.originalEvent.dataTransfer.setData('application/cloudron-filemanager', filePath);
};
$scope.dragEnter = function ($event, entry) {
@@ -192,21 +177,24 @@ function FileTreeController($scope, $translate, $timeout, Client) {
if (!event.originalEvent.dataTransfer.items[0]) return;
var targetFolder;
if (typeof entry === 'string') targetFolder = sanitize(entry);
if (entry === null) targetFolder = $scope.cwd + '/';
else if (typeof entry === 'string') targetFolder = sanitize(entry);
else targetFolder = sanitize($scope.cwd + '/' + (entry && entry.isDirectory ? entry.fileName : ''));
var dataTransfer = event.originalEvent.dataTransfer;
var dragContent = dataTransfer.getData('application/cloudron-filemanager');
// check if we have internal drag'n'drop
if (dataTransfer.getData('application/cloudron-filemanager')) {
if ($scope.selected.length === 0) return;
if (dragContent) {
var moved = 0;
// FIXME only one currently supported
var arr = [ dragContent ];
// move files
async.eachLimit($scope.selected, 5, function (entry, callback) {
var oldFilePath = sanitize($scope.cwd + '/' + entry.fileName);
var newFilePath = sanitize(targetFolder + '/' + entry.fileName);
async.eachLimit(arr, 5, function (oldFilePath, callback) {
var fileName = oldFilePath.split('/').slice(-1);
var newFilePath = sanitize(targetFolder + '/' + fileName);
// if we drop the item on itself
if (oldFilePath === targetFolder) return callback();
@@ -221,8 +209,6 @@ function FileTreeController($scope, $translate, $timeout, Client) {
}, function (error) {
if (error) return Client.error(error);
$scope.selected = [];
// only refresh if anything has changed
if (moved) $scope.refresh();
});
@@ -234,23 +220,19 @@ function FileTreeController($scope, $translate, $timeout, Client) {
var folderItem;
try {
folderItem = dataTransfer.items[0].webkitGetAsEntry();
if (folderItem.isFile) return uploadFiles(event.originalEvent.dataTransfer.files, targetFolder, false);
if (folderItem.isFile) return $scope.$parent.uploadFiles(event.originalEvent.dataTransfer.files, targetFolder, false);
} catch (e) {
return uploadFiles(event.originalEvent.dataTransfer.files, targetFolder, false);
return $scope.$parent.uploadFiles(event.originalEvent.dataTransfer.files, targetFolder, false);
}
// if we got here we have a folder drop and a modern browser
// now traverse the folder tree and create a file list
$scope.uploadStatus.busy = true;
$scope.uploadStatus.count = 0;
var fileList = [];
function traverseFileTree(item, path, callback) {
if (item.isFile) {
// Get file
item.file(function (file) {
fileList.push(file);
++$scope.uploadStatus.count;
callback();
});
} else if (item.isDirectory) {
@@ -265,12 +247,9 @@ function FileTreeController($scope, $translate, $timeout, Client) {
}
traverseFileTree(folderItem, '', function (error) {
$scope.uploadStatus.busy = false;
$scope.uploadStatus.count = 0;
if (error) return console.error(error);
uploadFiles(fileList, targetFolder, false);
$scope.$parent.uploadFiles(fileList, targetFolder, false);
});
};
@@ -278,6 +257,30 @@ function FileTreeController($scope, $translate, $timeout, Client) {
$scope.$parent.refresh();
};
function amendIcons() {
$scope.entries.forEach(function (e) {
e.icon = 'fa-file';
e.previewUrl = null;
if (e.isDirectory) e.icon = 'fa-folder';
if (e.isSymbolicLink) e.icon = 'fa-link';
if (e.isFile) {
var mimeType = Mimer().get(e.fileName);
var mimeGroup = mimeType.split('/')[0];
if (mimeGroup === 'text') e.icon = 'fa-file-alt';
// if (mimeGroup === 'image') e.icon = 'fa-file-image';
if (mimeGroup === 'image') {
e.icon = 'fa-file-image';
e.previewUrl = Client.filesGetLink($scope.backendId, $scope.backendType, sanitize($scope.cwd + '/' + e.fileName));
}
if (mimeGroup === 'video') e.icon = 'fa-file-video';
if (mimeGroup === 'audio') e.icon = 'fa-file-audio';
if (mimeType === 'text/csv') e.icon = 'fa-file-csv';
if (mimeType === 'application/pdf') e.icon = 'fa-file-pdf';
}
});
}
// called from the parent
$scope.onRefresh = function () {
$scope.selected = [];
@@ -285,30 +288,8 @@ function FileTreeController($scope, $translate, $timeout, Client) {
Client.filesGet($scope.backendId, $scope.backendType, $scope.cwd, 'data', function (error, result) {
if (error) return Client.error(error);
// amend icons
result.entries.forEach(function (e) {
e.icon = 'fa-file';
e.previewUrl = null;
if (e.isDirectory) e.icon = 'fa-folder';
if (e.isSymbolicLink) e.icon = 'fa-link';
if (e.isFile) {
var mimeType = Mimer().get(e.fileName);
var mimeGroup = mimeType.split('/')[0];
if (mimeGroup === 'text') e.icon = 'fa-file-alt';
// if (mimeGroup === 'image') e.icon = 'fa-file-image';
if (mimeGroup === 'image') {
e.icon = 'fa-file-image';
e.previewUrl = Client.filesGetLink($scope.backendId, $scope.backendType, sanitize($scope.cwd + '/' + e.fileName));
}
if (mimeGroup === 'video') e.icon = 'fa-file-video';
if (mimeGroup === 'audio') e.icon = 'fa-file-audio';
if (mimeType === 'text/csv') e.icon = 'fa-file-csv';
if (mimeType === 'application/pdf') e.icon = 'fa-file-pdf';
}
});
$scope.entries = result.entries;
amendIcons();
sort();
$scope.busy = false;