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

GUAC-1172: Migrate to from ngRepeat to $interpolate for the file browser - Guacamole needs to be easy to $digest ;).

Browse Source
This commit is contained in:
Michael Jumper
2015-07-02 23:08:06 -07:00
parent 149fba6737
commit e2f83dd306
2 changed files with 78 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,11 +47,22 @@ angular.module('client').directive('guacFileBrowser', [function guacFileBrowser(
},
templateUrl: 'app/client/templates/guacFileBrowser.html',
controller: ['$scope', '$injector', function guacFileBrowserController($scope, $injector) {
controller: ['$scope', '$element', '$injector', function guacFileBrowserController($scope, $element, $injector) {
// Required types
var ManagedFilesystem = $injector.get('ManagedFilesystem');
// Required services
var $interpolate = $injector.get('$interpolate');
/**
* The jQuery-wrapped element representing the contents of the
* current directory within the file browser.
*
* @type Element[]
*/
var currentDirectoryContents = $element.find('.current-directory-contents');
/**
* Returns whether the given file is a normal file.
*
@@ -100,6 +111,65 @@ angular.module('client').directive('guacFileBrowser', [function guacFileBrowser(
ManagedFilesystem.downloadFile($scope.client, $scope.filesystem, file.streamName);
};
/**
* Creates a new element representing the given file and properly
* handling user events, bypassing the overhead incurred through
* use of ngRepeat and related techniques.
*
* @param {ManagedFilesystem.File} file
* The file to generate an element for.
*
* @returns {Element[]}
* A jQuery-wrapped array containing a single DOM element
* representing the given file.
*/
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));
// Change current directory when directories are clicked
if ($scope.isDirectory(file)) {
element.addClass('directory');
element.on('click', function changeDirectory() {
$scope.changeDirectory(file);
});
}
// Initiate downloads when normal files are clicked
else if ($scope.isNormalFile(file)) {
element.addClass('normal-file');
element.on('click', function downloadFile() {
$scope.downloadFile(file);
});
}
return element;
};
// 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
for (var name in files) {
currentDirectoryContents.append(createFileElement(files[name]));
}
});
}]
};

43
guacamole/src/main/webapp/app/client/templates/guacFileBrowser.html
View File

@@ -21,43 +21,14 @@
THE SOFTWARE.
-->
<script type="text/ng-template" id="file.html">
<!-- Normal file -->
<div class="normal-file" ng-show="isNormalFile(file)">
<div class="caption" ng-click="downloadFile(file)">
<div class="icon"></div>
{{file.name}}
</div>
<!-- Parent directory -->
<div class="list-item directory previous" ng-show="filesystem.currentDirectory.parent">
<div class="caption" ng-click="changeDirectory(filesystem.currentDirectory.parent)">
<div class="icon"></div> ..
</div>
<!-- Directory -->
<div class="directory" ng-show="isDirectory(file)">
<div class="caption" ng-click="changeDirectory(file)">
<div class="icon"></div>
{{file.name}}
</div>
</div>
</script>
<!-- Current directory contents -->
<div class="filesystem-root">
<!-- Parent directory -->
<div class="list-item" ng-show="filesystem.currentDirectory.parent">
<div class="directory previous">
<div class="caption" ng-click="changeDirectory(filesystem.currentDirectory.parent)">
<div class="icon"></div> ..
</div>
</div>
</div>
<!-- All other files -->
<div class="list-item"
ng-repeat="file in filesystem.currentDirectory.files | orderBy : 'name'"
ng-include="'file.html'"></div>
</div>
<!-- Current directory contents -->
<div class="current-directory-contents"></div>
</div>