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

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

@@ -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(
+                var element = angular.element($interpolate(fileTemplate)(file));
-
-                      '<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)) {
@@ -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
+            // Watch directory contents once file template is available
-            $scope.$watch('filesystem.currentDirectory.files', function currentDirectoryChanged(files) {
+            $templateRequest('app/client/templates/file.html').then(function fileTemplateRetrieved(html) {
 
-                // Clear current content
+                // Store file template statically
-                currentDirectoryContents.html('');
+                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
 
         }]
 

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

@@ -0,0 +1,30 @@
+<div class="list-item">
+    <!--
+       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.
+    -->
+
+    <!-- Filename and icon -->
+    <div class="caption">
+        <div class="icon"></div>
+        {{::name}}
+    </div>
+
+</div>