mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-10-31 00:53:21 +00:00
GUAC-1172: Implement file browsing directive. Track expanded/collapsed state within ManagedFilesystem.File.
This commit is contained in:
Michael Jumper
@@ -0,0 +1,103 @@
|
||||
/*
|
||||
* Copyright (C) 2015 Glyptodon LLC
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A directive which displays the contents of a filesystem received through the
|
||||
* Guacamole client.
|
||||
*/
|
||||
angular.module('client').directive('guacFileBrowser', [function guacFileBrowser() {
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {
|
||||
|
||||
/**
|
||||
* The client whose file transfers should be managed by this
|
||||
* directive.
|
||||
*
|
||||
* @type ManagedClient
|
||||
*/
|
||||
client : '=',
|
||||
|
||||
/**
|
||||
* @type ManagedFilesystem
|
||||
*/
|
||||
filesystem : '='
|
||||
|
||||
},
|
||||
|
||||
templateUrl: 'app/client/templates/guacFileBrowser.html',
|
||||
controller: ['$scope', '$injector', function guacFileBrowserController($scope, $injector) {
|
||||
|
||||
// Required types
|
||||
var ManagedFilesystem = $injector.get('ManagedFilesystem');
|
||||
|
||||
/**
|
||||
* Returns whether the given file is a normal file.
|
||||
*
|
||||
* @param {ManagedFilesystem.File} file
|
||||
* The file to test.
|
||||
*
|
||||
* @returns {Boolean}
|
||||
* true if the given file is a normal file, false otherwise.
|
||||
*/
|
||||
$scope.isNormalFile = function isNormalFile(file) {
|
||||
return file.type === ManagedFilesystem.File.Type.NORMAL;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns whether the given file is a directory.
|
||||
*
|
||||
* @param {ManagedFilesystem.File} file
|
||||
* The file to test.
|
||||
*
|
||||
* @returns {Boolean}
|
||||
* true if the given file is a directory, false otherwise.
|
||||
*/
|
||||
$scope.isDirectory = function isDirectory(file) {
|
||||
return file.type === ManagedFilesystem.File.Type.DIRECTORY;
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles the expanded state of the given file between expanded
|
||||
* and collapsed, showing or hiding the file's children. This is
|
||||
* only applicable to directories.
|
||||
*
|
||||
* @param {ManagedFilesystem.File} file
|
||||
* The file to expand or collapse.
|
||||
*/
|
||||
$scope.toggleExpanded = function toggleExpanded(file) {
|
||||
|
||||
// Toggle expanded state
|
||||
file.expanded = !file.expanded;
|
||||
|
||||
// If now expanded, refresh contents
|
||||
if (file.expanded)
|
||||
ManagedFilesystem.refresh($scope.filesystem, file);
|
||||
|
||||
};
|
||||
|
||||
}]
|
||||
|
||||
};
|
||||
}]);
|
||||
48
guacamole/src/main/webapp/app/client/styles/file-browser.css
Normal file
48
guacamole/src/main/webapp/app/client/styles/file-browser.css
Normal file
@@ -0,0 +1,48 @@
|
||||
/*
|
||||
* Copyright (C) 2015 Glyptodon LLC
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/* Hide directory contents by default */
|
||||
|
||||
.file-browser .directory > .children {
|
||||
padding-left: 1em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show directory contents if expanded */
|
||||
|
||||
.file-browser .directory.expanded > .children {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Directory / file icons */
|
||||
|
||||
.file-browser .normal-file > .caption .icon {
|
||||
background-image: url('images/file.png');
|
||||
}
|
||||
|
||||
.file-browser .directory > .caption .icon {
|
||||
background-image: url('images/folder-closed.png');
|
||||
}
|
||||
|
||||
.file-browser .directory.expanded > .caption .icon {
|
||||
background-image: url('images/folder-open.png');
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
<div class="file-browser">
|
||||
<!--
|
||||
Copyright (C) 2015 Glyptodon LLC
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
-->
|
||||
|
||||
<script type="text/ng-template" id="file.html">
|
||||
|
||||
<!-- Normal file -->
|
||||
<div class="normal-file" ng-show="isNormalFile(file)">
|
||||
<div class="caption">
|
||||
<div class="icon"></div>
|
||||
{{file.name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Directory -->
|
||||
<div class="directory" ng-show="isDirectory(file)" ng-class="{expanded: file.expanded}">
|
||||
<div class="caption" ng-click="toggleExpanded(file)">
|
||||
<div class="icon"></div>
|
||||
{{file.name}}
|
||||
</div>
|
||||
|
||||
<!-- Children of this directory -->
|
||||
<div class="children">
|
||||
<div class="list-item"
|
||||
ng-repeat="file in file.files | orderBy : 'name'"
|
||||
ng-include="'file.html'">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Root directory contents -->
|
||||
<div class="filesystem-root">
|
||||
<div class="list-item"
|
||||
ng-repeat="file in filesystem.root.files | orderBy : 'name'"
|
||||
ng-include="'file.html'"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -231,6 +231,14 @@ angular.module('client').factory('ManagedFilesystem', ['$rootScope', '$injector'
|
||||
*/
|
||||
this.files = template.files || {};
|
||||
|
||||
/**
|
||||
* Whether this file is currently expanded, exposing any children
|
||||
* within. This is only applicable to directories.
|
||||
*
|
||||
* @type Boolean
|
||||
*/
|
||||
this.expanded = template.expanded || false;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user