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

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

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

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

@@ -21,43 +21,14 @@
        THE SOFTWARE.
     -->
 
-    <script type="text/ng-template" id="file.html">
+    <!-- Parent directory -->
-
+    <div class="list-item directory previous" ng-show="filesystem.currentDirectory.parent">
-        <!-- Normal file -->
+        <div class="caption" ng-click="changeDirectory(filesystem.currentDirectory.parent)">
-        <div class="normal-file" ng-show="isNormalFile(file)">
+            <div class="icon"></div> ..
-            <div class="caption" ng-click="downloadFile(file)">
-                <div class="icon"></div>
-                {{file.name}}
-            </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>