safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-10 07:01:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-1172: Use template for files within the file browser.

Browse Source
This commit is contained in:
Michael Jumper
2015-07-05 13:42:56 -07:00
parent e6886f7bbf
commit 05eb8da0ec
2 changed files with 62 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
guacamole/src/main/webapp/app/client/directives/guacFileBrowser.js
View File

@@ -53,7 +53,8 @@ angular.module('client').directive('guacFileBrowser', [function guacFileBrowser(
var ManagedFilesystem = $injector.get('ManagedFilesystem');
// Required services
var $interpolate = $injector.get('$interpolate');
var $interpolate = $injector.get('$interpolate');
var $templateRequest = $injector.get('$templateRequest');
/**
* The jQuery-wrapped element representing the contents of the
@@ -63,6 +64,16 @@ angular.module('client').directive('guacFileBrowser', [function guacFileBrowser(
*/
var currentDirectoryContents = $element.find('.current-directory-contents');
/**
* Statically-cached template HTML used to render each file within
* a directory. Once available, this will be used through
* createFileElement() to generate the DOM elements which make up
* a directory listing.
*
* @type String
*/
var fileTemplate = null;
/**
* Returns whether the given file is a normal file.
*
@@ -116,6 +127,9 @@ angular.module('client').directive('guacFileBrowser', [function guacFileBrowser(
* handling user events, bypassing the overhead incurred through
* use of ngRepeat and related techniques.
*
* Note that this function depends on the availability of the
* statically-cached fileTemplate.
*
* @param {ManagedFilesystem.File} file
* The file to generate an element for.
*
@@ -126,16 +140,7 @@ angular.module('client').directive('guacFileBrowser', [function guacFileBrowser(
var createFileElement = function createFileElement(file) {
// Create from internal template
var element = angular.element($interpolate(
'<div class="list-item">'
+ '<div class="caption">'
+ '<div class="icon"></div>'
+ '{{::name}}'
+ '</div>'
+ '</div>'
)(file));
var element = angular.element($interpolate(fileTemplate)(file));
// Change current directory when directories are clicked
if ($scope.isDirectory(file)) {
@@ -196,18 +201,26 @@ angular.module('client').directive('guacFileBrowser', [function guacFileBrowser(
};
// Update the contents of the file browser whenever the current directory (or its contents) changes
$scope.$watch('filesystem.currentDirectory.files', function currentDirectoryChanged(files) {
// Watch directory contents once file template is available
$templateRequest('app/client/templates/file.html').then(function fileTemplateRetrieved(html) {
// Clear current content
currentDirectoryContents.html('');
// Store file template statically
fileTemplate = html;
// Update the contents of the file browser whenever the current directory (or its contents) changes
$scope.$watch('filesystem.currentDirectory.files', function currentDirectoryChanged(files) {
// Clear current content
currentDirectoryContents.html('');
// Display all files within current directory, sorted
angular.forEach(sortFiles(files), function displayFile(file) {
currentDirectoryContents.append(createFileElement(file));
});
// Display all files within current directory, sorted
angular.forEach(sortFiles(files), function displayFile(file) {
currentDirectoryContents.append(createFileElement(file));
});
});
}); // end retrieve file template
}]