Merge remote-tracking branch 'dashboard/master'
This commit is contained in:
Girish Ramakrishnan
80
dashboard/src/components/filetree.html
Normal file
80
dashboard/src/components/filetree.html
Normal file
@@ -0,0 +1,80 @@
|
||||
|
||||
<!-- Modal image/video viewer -->
|
||||
<div class="modal fade" id="{{ 'mediaViewerModal-' + $id }}" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" style="max-width: 1280px; max-height: calc(100% - 60px);">
|
||||
<div class="modal-content" style="height: 100%; height: 100%; display: flex; background-color: #000; background-clip: border-box;">
|
||||
<img ng-show="mediaViewer.type === 'image'" ng-src="{{ mediaViewer.src }}" style="display: block; margin: auto; max-width: 100%; max-height: 100%;" />
|
||||
<video ng-show="mediaViewer.type === 'video'" controls preload="auto" autoplay ng-src="{{ mediaViewer.src | trustUrl}}" style="display: block; margin: auto; max-width: 100%; max-height: 100%;"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- main content -->
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="btn-group" role="group" style="display: block;">
|
||||
<!-- TODO figure out why a line break in code between the two buttons results in a gap visually without any margin/padding set -->
|
||||
<button class="btn btn-primary" ng-click="goDirectoryUp()" ng-disabled="cwd === ''"><i class="fas fa-arrow-left"></i></button><button class="btn btn-primary" ng-disabled="busyRefresh" ng-click="refresh()"><i class="fas fa-redo" ng-class="{ 'fa-spin': busyRefresh }"></i></button>
|
||||
</div>
|
||||
<div class="btn-group path-parts" role="group">
|
||||
<button class="btn btn-default" ng-disabled="cwd === ''" ng-click="changeDirectory('/')" ng-drop="drop($event, '/')" ng-dragleave="dragExit($event, '/')" ng-dragover="dragEnter($event, '/')"><i class="fas fa-home"></i> {{ rootDirLabel }} </button><button class="btn btn-default" ng-disabled="part.path === cwd" ng-click="changeDirectory(part.path)" ng-drop="drop($event, part.path)" ng-dragleave="dragExit($event, part.path)" ng-dragover="dragEnter($event, part.path)" ng-repeat="part in cwdParts">{{ part.name }}</button>
|
||||
</div>
|
||||
<div style="display: block;">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i> {{ 'filemanager.toolbar.new' | tr }}</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="hand" ng-click="onNewFile()">{{ 'filemanager.toolbar.newFile' | tr }}</a></li>
|
||||
<li><a class="hand" ng-click="onNewFolder()">{{ 'filemanager.toolbar.newFolder' | tr }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-upload"></i> {{ 'filemanager.toolbar.upload' | tr }}</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<li><a class="hand" ng-click="onUploadFile()">{{ 'filemanager.toolbar.uploadFile' | tr }}</a></li>
|
||||
<li><a class="hand" ng-click="onUploadFolder()">{{ 'filemanager.toolbar.uploadFolder' | tr }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="file-list-header">
|
||||
<table class="table" style="margin: 0;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 42px"> </th>
|
||||
<th style="">{{ 'filemanager.list.name' | tr }}</th>
|
||||
<th style="width:100px">{{ 'filemanager.list.owner' | tr }}</th>
|
||||
<th style="width: 80px">{{ 'filemanager.list.size' | tr }}</th>
|
||||
<th style="width:100px">{{ 'filemanager.list.mtime' | tr }}</th>
|
||||
<th style="width: 45px;"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="file-list" ng-class="{ 'entry-hovered': dropToBody, 'busy': busy }" context-menu="menuOptionsBlank" ng-mousedown="onClearSelection($event)" 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 && !busyRefresh">
|
||||
<td colspan="6"><center><h2><i class="fa fa-circle-notch fa-spin"></i></h2></center></td>
|
||||
</tr>
|
||||
<tr ng-show="!(busy && !busyRefresh) && entries.length === 0">
|
||||
<td colspan="" class="text-center">{{ 'filemanager.list.empty' | tr }}</td>
|
||||
</tr>
|
||||
<tr style="cursor: default" ng-hide="busy && !busyRefresh" entry-hashkey="{{ entry['$$hashKey'] }}" ng-repeat="entry in entries" ng-mouseup="onMouseup($event, entry)" draggable="true" ng-dragstart="dragStart($event, entry)" ng-drop="drop($event, entry)" context-menu="menuOptions" model="entry" ng-dragleave="dragExit($event, entry)" ng-dragover="dragEnter($event, entry)" ng-class="{ 'entry-hovered': entry.hovered, 'entry-selected': isSelected(entry) }">
|
||||
<td style="width: 42px; height: 42px" ng-dblclick="open(entry)" class="text-center">
|
||||
<i ng-show="!entry.previewUrl" class="fas fa-lg {{ entry.icon }}" ng-class="{ 'text-primary': entry.isDirectory && !isSelected(entry) }"></i>
|
||||
<img ng-show="entry.previewUrl" ng-src="{{ entry.previewUrl }}" height="42" width="42" style="object-fit: cover;"/>
|
||||
</td>
|
||||
<td class="elide-table-cell" ng-dblclick="open(entry)" style="padding-left: 5px;">{{ entry.fileName }}<span ng-show="entry.isSymbolicLink" class="text-muted" style="margin-left: 20px;">{{ 'filemanager.list.symlink' | tr:{ target: entry.target } }}</span></td>
|
||||
<td style="width:100px" class="elide-table-cell" ng-dblclick="open(entry)">{{ entry.uid | prettyOwner }}</td>
|
||||
<td style="width: 80px" class="elide-table-cell" ng-dblclick="open(entry)">{{ entry.size | prettyDecimalSize }}</td>
|
||||
<td style="width:100px" class="elide-table-cell" ng-dblclick="open(entry)" uib-tooltip="{{ entry.mtime | prettyLongDate }}" tooltip-append-to-body="true">{{ entry.mtime | prettyDate }}</td>
|
||||
<td style="width: 45px">
|
||||
<button type="button" class="btn btn-xs btn-default context-menu-action" context-menu="menuOptions" model="entry" context-menu-on="click" ng-click="onEntryContextMenu($event, entry)"><i class="fas fa-ellipsis-h"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
513
dashboard/src/components/filetree.js
Normal file
513
dashboard/src/components/filetree.js
Normal file
@@ -0,0 +1,513 @@
|
||||
'use strict';
|
||||
|
||||
/* global angular */
|
||||
/* global sanitize, isModalVisible */
|
||||
|
||||
angular.module('Application').component('filetree', {
|
||||
bindings: {
|
||||
backendId: '<',
|
||||
backendType: '<',
|
||||
view: '<',
|
||||
clipboard: '<',
|
||||
onUploadFile: '&',
|
||||
onUploadFolder: '&',
|
||||
onNewFile: '&',
|
||||
onNewFolder: '&',
|
||||
onRenameEntry: '&',
|
||||
onExtractEntry: '&',
|
||||
onChownEntries: '&',
|
||||
onDeleteEntries: '&',
|
||||
onCopyEntries: '&',
|
||||
onCutEntries: '&',
|
||||
onPasteEntries: '&'
|
||||
},
|
||||
templateUrl: 'components/filetree.html?<%= revision %>',
|
||||
controller: [ '$scope', '$translate', '$timeout', 'Client', FileTreeController ]
|
||||
});
|
||||
|
||||
function FileTreeController($scope, $translate, $timeout, Client) {
|
||||
var ctrl = this;
|
||||
|
||||
$scope.backendId = this.backendId;
|
||||
$scope.backendType = this.backendType;
|
||||
$scope.view = this.view;
|
||||
|
||||
$scope.busy = true;
|
||||
$scope.busyRefresh = false;
|
||||
$scope.client = Client;
|
||||
$scope.cwd = null;
|
||||
$scope.cwdParts = [];
|
||||
$scope.rootDirLabel = '';
|
||||
$scope.entries = [];
|
||||
$scope.selected = []; // holds selected entries
|
||||
$scope.dropToBody = false;
|
||||
$scope.applicationLink = '';
|
||||
|
||||
// register so parent can call child
|
||||
$scope.$parent.registerChild($scope);
|
||||
|
||||
function isArchive(f) {
|
||||
return f.match(/\.tgz$/) ||
|
||||
f.match(/\.tar$/) ||
|
||||
f.match(/\.7z$/) ||
|
||||
f.match(/\.zip$/) ||
|
||||
f.match(/\.tar\.gz$/) ||
|
||||
f.match(/\.tar\.xz$/) ||
|
||||
f.match(/\.tar\.bz2$/);
|
||||
}
|
||||
|
||||
$scope.menuOptions = []; // shown for entries
|
||||
$scope.menuOptionsBlank = []; // shown for empty space in folder
|
||||
|
||||
function sort() {
|
||||
return $scope.entries.sort(function (a, b) {
|
||||
if (a.fileName.toLowerCase() < b.fileName.toLowerCase()) return -1;
|
||||
return 1;
|
||||
}).sort(function (a, b) {
|
||||
if ((a.isDirectory && b.isDirectory) || (!a.isDirectory && !b.isDirectory)) return 0;
|
||||
if (a.isDirectory && !b.isDirectory) return -1;
|
||||
return 1;
|
||||
});
|
||||
}
|
||||
|
||||
$scope.isSelected = function (entry) {
|
||||
return $scope.selected.indexOf(entry) !== -1;
|
||||
};
|
||||
|
||||
function download(entry) {
|
||||
var filePath = sanitize($scope.cwd + '/' + entry.fileName);
|
||||
|
||||
Client.filesGet($scope.backendId, $scope.backendType, filePath, 'download', function (error) {
|
||||
if (error) return Client.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
$scope.dragStart = function ($event, entry) {
|
||||
var filePaths = $scope.selected.map(function (entry) { return sanitize($scope.cwd + '/' + entry.fileName); });
|
||||
$event.originalEvent.dataTransfer.setData('application/cloudron-filemanager', JSON.stringify(filePaths));
|
||||
};
|
||||
|
||||
$scope.dragEnter = function ($event, entry) {
|
||||
$event.originalEvent.stopPropagation();
|
||||
$event.originalEvent.preventDefault();
|
||||
|
||||
// if entry is string, we come from breadcrumb
|
||||
if (entry && typeof entry === 'string') $event.currentTarget.classList.add('entry-hovered');
|
||||
else if (entry && entry.isDirectory) entry.hovered = true;
|
||||
else $scope.dropToBody = true;
|
||||
|
||||
$event.originalEvent.dataTransfer.dropEffect = 'move';
|
||||
};
|
||||
|
||||
$scope.dragExit = function ($event, entry) {
|
||||
$event.originalEvent.stopPropagation();
|
||||
$event.originalEvent.preventDefault();
|
||||
|
||||
// if entry is string, we come from breadcrumb
|
||||
if (entry && typeof entry === 'string') $event.currentTarget.classList.remove('entry-hovered');
|
||||
else if (entry && entry.isDirectory) entry.hovered = false;
|
||||
$scope.dropToBody = false;
|
||||
|
||||
$event.originalEvent.dataTransfer.dropEffect = 'move';
|
||||
};
|
||||
|
||||
$scope.drop = function (event, entry) {
|
||||
event.originalEvent.stopPropagation();
|
||||
event.originalEvent.preventDefault();
|
||||
|
||||
$scope.dropToBody = false;
|
||||
|
||||
if (!event.originalEvent.dataTransfer.items[0]) return;
|
||||
|
||||
var targetFolder;
|
||||
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 (dragContent) {
|
||||
var moved = 0;
|
||||
|
||||
// we expect a JSON.stringified Array here
|
||||
try {
|
||||
dragContent = JSON.parse(dragContent);
|
||||
} catch (e) {
|
||||
console.error('Wrong drag content.', e);
|
||||
return;
|
||||
}
|
||||
|
||||
// move files
|
||||
async.eachLimit(dragContent, 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();
|
||||
|
||||
// if nothing changes
|
||||
if (newFilePath === oldFilePath) return callback();
|
||||
|
||||
moved++;
|
||||
|
||||
// TODO this will overwrite files in destination!
|
||||
Client.filesRename($scope.backendId, $scope.backendType, oldFilePath, newFilePath, callback);
|
||||
}, function (error) {
|
||||
if (error) return Client.error(error);
|
||||
|
||||
// only refresh if anything has changed
|
||||
if (moved) $scope.refresh();
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// figure if a folder was dropped on a modern browser, in this case the first would have to be a directory
|
||||
var folderItem;
|
||||
try {
|
||||
folderItem = dataTransfer.items[0].webkitGetAsEntry();
|
||||
if (folderItem.isFile) return $scope.$parent.uploadFiles(event.originalEvent.dataTransfer.files, targetFolder, false);
|
||||
} catch (e) {
|
||||
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
|
||||
var fileList = [];
|
||||
function traverseFileTree(item, path, callback) {
|
||||
if (item.isFile) {
|
||||
// Get file
|
||||
item.file(function (file) {
|
||||
fileList.push(file);
|
||||
callback();
|
||||
});
|
||||
} else if (item.isDirectory) {
|
||||
// Get folder contents
|
||||
var dirReader = item.createReader();
|
||||
dirReader.readEntries(function (entries) {
|
||||
async.each(entries, function (entry, callback) {
|
||||
traverseFileTree(entry, path + item.name + '/', callback);
|
||||
}, callback);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
traverseFileTree(folderItem, '', function (error) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
$scope.$parent.uploadFiles(fileList, targetFolder, false);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.refresh = function () {
|
||||
$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.toLowerCase());
|
||||
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 = [];
|
||||
$scope.busy = true;
|
||||
$scope.busyRefresh = true;
|
||||
|
||||
Client.filesGet($scope.backendId, $scope.backendType, $scope.cwd, 'data', function (error, result) {
|
||||
if (error && error.statusCode !== 404) return Client.error(error);
|
||||
|
||||
$scope.entries = result ? result.entries : [];
|
||||
amendIcons();
|
||||
sort();
|
||||
|
||||
$scope.busyRefresh = false;
|
||||
$scope.busy = false;
|
||||
});
|
||||
};
|
||||
|
||||
function openDirectory(path) {
|
||||
$scope.cwd = path;
|
||||
$scope.selected = [];
|
||||
|
||||
$scope.cwdParts = path.split('/').filter(function (p) { return !!p; }).map(function (p, i) { return { name: decodeURIComponent(p), path: path.split('/').slice(0, i+1).join('/') }; });
|
||||
|
||||
// refresh will set busy to false once done
|
||||
$scope.refresh();
|
||||
}
|
||||
|
||||
function openFile(entry) {
|
||||
var mimeType = Mimer().get(entry.fileName);
|
||||
var mimeGroup = mimeType.split('/')[0];
|
||||
var path = sanitize($scope.cwd + '/' + entry.fileName);
|
||||
|
||||
if (mimeGroup === 'video' || mimeGroup === 'image') {
|
||||
$scope.mediaViewer.show(entry);
|
||||
} else if (mimeType === 'application/pdf') {
|
||||
Client.filesGet($scope.backendId, $scope.backendType, path, 'open', function (error) { if (error) return Client.error(error); });
|
||||
} else if (mimeGroup === 'text' || mimeGroup === 'application') {
|
||||
$scope.$parent.textEditor.show($scope.cwd, entry);
|
||||
} else {
|
||||
Client.filesGet($scope.backendId, $scope.backendType, path, 'open', function (error) { if (error) return Client.error(error); });
|
||||
}
|
||||
|
||||
$scope.busy = false;
|
||||
}
|
||||
|
||||
$scope.open = function (entry) {
|
||||
if (entry.isDirectory) openDirectory(sanitize($scope.cwd + '/' + entry.fileName));
|
||||
else if (entry.isFile) openFile(entry);
|
||||
};
|
||||
|
||||
$scope.goDirectoryUp = function () {
|
||||
openDirectory(sanitize($scope.cwd + '/..'));
|
||||
};
|
||||
|
||||
$scope.changeDirectory = function (path) {
|
||||
openDirectory(sanitize(path));
|
||||
};
|
||||
|
||||
$scope.onClearSelection = function ($event) {
|
||||
// we don't stop propagation if targets don't match we got the whole list click event
|
||||
if ($event.currentTarget !== $event.target) return;
|
||||
|
||||
$scope.selected = [];
|
||||
};
|
||||
|
||||
$scope.onMousedown = function ($event, entry) {
|
||||
if ($event.button === 2) {
|
||||
$scope.onMouseup($event, entry);
|
||||
}
|
||||
};
|
||||
|
||||
$scope.onMouseup = function ($event, entry) {
|
||||
var i = $scope.selected.indexOf(entry);
|
||||
var multi = ($event.ctrlKey || $event.metaKey);
|
||||
var shift = $event.shiftKey;
|
||||
|
||||
if (shift) {
|
||||
if ($scope.selected.length === 0) {
|
||||
$scope.selected = [ entry ];
|
||||
} else {
|
||||
var pos = $scope.entries.indexOf(entry);
|
||||
var selectedPositions = $scope.selected.map(function (s) { return $scope.entries.indexOf(s); }).sort();
|
||||
|
||||
if (pos < selectedPositions[0]) {
|
||||
$scope.selected = $scope.entries.slice(pos, selectedPositions[0]+1);
|
||||
} else if (selectedPositions[1] && pos > selectedPositions[1]) {
|
||||
$scope.selected = $scope.entries.slice(selectedPositions[1], pos+1);
|
||||
} else {
|
||||
$scope.selected = $scope.entries.slice(selectedPositions[0], pos+1);
|
||||
}
|
||||
}
|
||||
} else if (multi) {
|
||||
if (i === -1) {
|
||||
$scope.selected.push(entry);
|
||||
} else if ($event.button === 0) { // only do this on left click
|
||||
$scope.selected.splice(i, 1);
|
||||
}
|
||||
} else {
|
||||
$scope.selected = [ entry ];
|
||||
}
|
||||
};
|
||||
|
||||
$scope.onEntryContextMenu = function ($event, entry) {
|
||||
if ($scope.selected.indexOf(entry) !== -1) return;
|
||||
$scope.selected.push(entry);
|
||||
};
|
||||
|
||||
$scope.actionSelectAll = function () {
|
||||
$scope.selected = $scope.entries.slice();
|
||||
};
|
||||
|
||||
// just events to the parent controller
|
||||
$scope.onUploadFile = function () { ctrl.onUploadFile({ cwd: $scope.cwd }); };
|
||||
$scope.onUploadFolder = function () { ctrl.onUploadFolder({ cwd: $scope.cwd }); };
|
||||
$scope.onNewFile = function () { ctrl.onNewFile({ cwd: $scope.cwd }); };
|
||||
$scope.onNewFolder = function () { ctrl.onNewFolder({ cwd: $scope.cwd }); };
|
||||
|
||||
$scope.mediaViewer = {
|
||||
type: '',
|
||||
src: '',
|
||||
entry: null,
|
||||
|
||||
show: function (entry) {
|
||||
var filePath = sanitize($scope.cwd + '/' + entry.fileName);
|
||||
|
||||
$scope.mediaViewer.entry = entry;
|
||||
$scope.mediaViewer.type = Mimer().get(entry.fileName).split('/')[0];
|
||||
$scope.mediaViewer.src = Client.filesGetLink($scope.backendId, $scope.backendType, filePath);
|
||||
|
||||
$('#mediaViewerModal-' + $scope.$id).modal('show');
|
||||
},
|
||||
|
||||
close: function () {
|
||||
// set an empty pixel image to bust the cached img to avoid flickering on slow load
|
||||
$scope.mediaViewer.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==';
|
||||
|
||||
$('#mediaViewerModal-' + $scope.$id).modal('hide');
|
||||
}
|
||||
};
|
||||
|
||||
$translate(['filemanager.list.menu.edit', 'filemanager.list.menu.cut', 'filemanager.list.menu.copy', 'filemanager.list.menu.paste', 'filemanager.list.menu.rename', 'filemanager.list.menu.chown', 'filemanager.list.menu.extract', 'filemanager.list.menu.download', 'filemanager.list.menu.delete' ]).then(function (tr) {
|
||||
$scope.menuOptions = [
|
||||
{
|
||||
text: tr['filemanager.list.menu.edit'],
|
||||
displayed: function ($itemScope, $event, entry) { return !entry.isDirectory && !entry.isSymbolicLink; },
|
||||
enabled: function () { return $scope.selected.length === 1; },
|
||||
hasBottomDivider: true,
|
||||
click: function ($itemScope, $event, entry) { $scope.open(entry); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.cut'],
|
||||
click: function ($itemScope, $event, entry) { ctrl.onCutEntries({ cwd: $scope.cwd, entries: $scope.selected.slice() }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.copy'],
|
||||
click: function ($itemScope, $event, entry) { ctrl.onCopyEntries({ cwd: $scope.cwd, entries: $scope.selected.slice() }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.paste'],
|
||||
hasBottomDivider: true,
|
||||
enabled: function () { return ctrl.clipboard.length; },
|
||||
click: function ($itemScope, $event, entry) { ctrl.onPasteEntries({ cwd: $scope.cwd, entry: entry }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.rename'],
|
||||
enabled: function () { return $scope.selected.length === 1; },
|
||||
click: function ($itemScope, $event, entry) { ctrl.onRenameEntry({ cwd: $scope.cwd, entry: entry }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.chown'],
|
||||
click: function ($itemScope, $event, entry) { ctrl.onChownEntries({ cwd: $scope.cwd, entries: $scope.selected }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.extract'],
|
||||
displayed: function ($itemScope, $event, entry) { return !entry.isDirectory && isArchive(entry.fileName); },
|
||||
click: function ($itemScope, $event, entry) { ctrl.onExtractEntry({ cwd: $scope.cwd, entry: entry }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.download'],
|
||||
enabled: function () { return $scope.selected.length === 1; },
|
||||
click: function ($itemScope, $event, entry) { download(entry); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.delete'],
|
||||
hasTopDivider: true,
|
||||
click: function ($itemScope, $event, entry) { ctrl.onDeleteEntries({ cwd: $scope.cwd, entries: $scope.selected }); }
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
$translate(['filemanager.toolbar.newFile', 'filemanager.toolbar.newFolder', 'filemanager.list.menu.paste', 'filemanager.list.menu.selectAll' ]).then(function (tr) {
|
||||
$scope.menuOptionsBlank = [
|
||||
{
|
||||
text: tr['filemanager.toolbar.newFile'],
|
||||
click: function ($itemScope, $event) { ctrl.onNewFile({ cwd: $scope.cwd }); }
|
||||
}, {
|
||||
text: tr['filemanager.toolbar.newFolder'],
|
||||
click: function ($itemScope, $event) { ctrl.onNewFolder({ cwd: $scope.cwd }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.paste'],
|
||||
hasTopDivider: true,
|
||||
hasBottomDivider: true,
|
||||
enabled: function () { return ctrl.clipboard.length; },
|
||||
click: function ($itemScope, $event) { ctrl.onPasteEntries({ cwd: $scope.cwd, entry: null }); }
|
||||
}, {
|
||||
text: tr['filemanager.list.menu.selectAll'],
|
||||
click: function ($itemScope, $event) { $scope.actionSelectAll(); }
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
function scrollInView(element) {
|
||||
if (!element) return;
|
||||
|
||||
// This assumes the DOM tree being that rigid
|
||||
function isVisible(ele) {
|
||||
var container = ele.parentElement.parentElement.parentElement;
|
||||
var eleTop = ele.offsetTop;
|
||||
var eleBottom = eleTop + ele.clientHeight;
|
||||
|
||||
var containerTop = container.scrollTop;
|
||||
var containerBottom = containerTop + container.clientHeight;
|
||||
|
||||
// The element is fully visible in the container
|
||||
return (
|
||||
(eleTop >= containerTop && eleBottom <= containerBottom) ||
|
||||
// Some part of the element is visible in the container
|
||||
(eleTop < containerTop && containerTop < eleBottom) ||
|
||||
(eleTop < containerBottom && containerBottom < eleBottom)
|
||||
);
|
||||
}
|
||||
|
||||
if (!isVisible(element)) element.scrollIntoView();
|
||||
}
|
||||
|
||||
function openSelected() {
|
||||
if (!$scope.selected.length) return;
|
||||
|
||||
$scope.open($scope.selected[0]);
|
||||
}
|
||||
|
||||
function selectNext() {
|
||||
var entries = sort();
|
||||
|
||||
if (!$scope.selected.length) return $scope.selected = [ entries[0] ];
|
||||
|
||||
var curIndex = $scope.entries.indexOf($scope.selected[0]);
|
||||
if (curIndex !== -1 && curIndex < $scope.entries.length-1) {
|
||||
var entry = entries[++curIndex];
|
||||
$scope.selected = [ entry ];
|
||||
scrollInView(document.querySelector('[entry-hashkey="' + entry['$$hashKey'] + '"]'));
|
||||
}
|
||||
}
|
||||
|
||||
function selectPrev() {
|
||||
var entries = sort();
|
||||
|
||||
if (!$scope.selected.length) return $scope.selected = [ entries.slice(-1) ];
|
||||
|
||||
var curIndex = $scope.entries.indexOf($scope.selected[0]);
|
||||
if (curIndex !== -1 && curIndex !== 0) {
|
||||
var entry = entries[--curIndex];
|
||||
$scope.selected = [ entry ];
|
||||
scrollInView(document.querySelector('[entry-hashkey="' + entry['$$hashKey'] + '"]'));
|
||||
}
|
||||
}
|
||||
|
||||
openDirectory('.');
|
||||
|
||||
$('.file-list').on('scroll', function (event) {
|
||||
if (event.target.scrollTop > 10) event.target.classList.add('top-scroll-indicator');
|
||||
else event.target.classList.remove('top-scroll-indicator');
|
||||
});
|
||||
|
||||
// handle shortcuts
|
||||
window.addEventListener('keydown', function (event) {
|
||||
if ($scope.$parent.activeView !== $scope.view || $scope.$parent.viewerOpen || isModalVisible()) return;
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
$scope.$apply(selectNext);
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
$scope.$apply(selectPrev);
|
||||
} else if (event.key === 'Enter') {
|
||||
$scope.$apply(openSelected);
|
||||
} else if (event.key === 'Backspace') {
|
||||
if ($scope.view === 'fileTree') $scope.goDirectoryUp();
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user