GUAC-1172: Implement file browsing directive. Track expanded/collapsed state within ManagedFilesystem.File.

guacamole/src/main/webapp/app/client/directives/guacFileBrowser.js

@@ -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);
+
+            };
+
+        }]
+
+    };
+}]);

guacamole/src/main/webapp/app/client/styles/file-browser.css

@@ -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');
+}

guacamole/src/main/webapp/app/client/templates/guacFileBrowser.html

@@ -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>

guacamole/src/main/webapp/app/client/types/ManagedFilesystem.js

@@ -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;
+
     };
 
     /**