senchalabs · gottaloveit · Jan 2, 2014 · Jan 2, 2014 · Jan 2, 2014 · Jan 2, 2014
diff --git a/lib/middleware/directory.js b/lib/middleware/directory.js
@@ -1,4 +1,3 @@
-
 /*!
  * Connect - directory
  * Copyright(c) 2011 Sencha Inc.
@@ -56,6 +55,7 @@ var mediaType = {
  *  - `hidden` display hidden (dot) files. Defaults to false.
  *  - `icons`  display icons. Defaults to false.
  *  - `filter` Apply this filter function to files. Defaults to false.
+ *  - `template` Optional path to html template.  Defaults to __dirname + '/../public/directory.html' 
  *
  * @param {String} root
  * @param {Object} options
@@ -72,7 +72,8 @@ exports = module.exports = function directory(root, options){
     , icons = options.icons
     , view = options.view || 'tiles'
     , filter = options.filter
-    , root = normalize(root + sep);
+    , root = normalize(root + sep)
+    , template = options.template || __dirname + '/../public/directory.html';
 
   return function directory(req, res, next) {
     if ('GET' != req.method && 'HEAD' != req.method) return next();
@@ -110,7 +111,7 @@ exports = module.exports = function directory(root, options){
 
         // not acceptable
         if (!type) return next(utils.error(406));
-        exports[mediaType[type]](req, res, files, next, originalDir, showUp, icons, path, view);
+        exports[mediaType[type]](req, res, files, next, originalDir, showUp, icons, path, view, template);
       });
     });
   };
@@ -120,8 +121,8 @@ exports = module.exports = function directory(root, options){
  * Respond with text/html.
  */
 
-exports.html = function(req, res, files, next, dir, showUp, icons, path, view){
-  fs.readFile(__dirname + '/../public/directory.html', 'utf8', function(err, str){
+exports.html = function(req, res, files, next, dir, showUp, icons, path, view, template){
+  fs.readFile(template, 'utf8', function(err, str){
     if (err) return next(err);
     fs.readFile(__dirname + '/../public/style.css', 'utf8', function(err, style){
       if (err) return next(err);

diff --git a/test/directory.js b/test/directory.js
@@ -1,4 +1,3 @@
-
 var connect = require('..');
 
 var app = connect();
@@ -118,6 +117,26 @@ describe('directory()', function(){
     });
   });
 
+  describe('when setting a custom template', function () {
+    var app = connect(connect.directory('test/fixtures'),{template: __dirname + '/shared/template.html'});
+
+    it('should respond with file list and testing template sentence', function (done) {
+      app.request()
+      .get('/')
+      .set('Accept', 'text/html')
+      .end(function(res){
+        res.statusCode.should.equal(200);
+        res.should.be.html;
+        res.body.should.include('users');
+        res.body.should.include('g# %3 o %2525 %37 dir');
+        res.body.should.include('file #1.txt');
+        res.body.should.include('todo.txt');
+        res.body.should.include('This is the test template');
+        done();
+      });   
+    });
+  });
+
   describe('when set with trailing slash', function () {
     var app = connect(connect.directory('test/fixtures/'));
 

diff --git a/test/shared/template.html b/test/shared/template.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>listing directory {directory}</title>
+    <style>{style}</style>
+    <script>
+      function $(id){
+        var el = 'string' == typeof id
+          ? document.getElementById(id)
+          : id;
+
+        el.on = function(event, fn){
+          if ('content loaded' == event) {
+            event = window.attachEvent ? "load" : "DOMContentLoaded";
+          }
+          el.addEventListener
+            ? el.addEventListener(event, fn, false)
+            : el.attachEvent("on" + event, fn);
+        };
+
+        el.all = function(selector){
+          return $(el.querySelectorAll(selector));
+        };
+
+        el.each = function(fn){
+          for (var i = 0, len = el.length; i < len; ++i) {
+            fn($(el[i]), i);
+          }
+        };
+
+        el.getClasses = function(){
+          return this.getAttribute('class').split(/\s+/);
+        };
+
+        el.addClass = function(name){
+          var classes = this.getAttribute('class');
+          el.setAttribute('class', classes
+            ? classes + ' ' + name
+            : name);
+        };
+
+        el.removeClass = function(name){
+          var classes = this.getClasses().filter(function(curr){
+            return curr != name;
+          });
+          this.setAttribute('class', classes.join(' '));
+        };
+
+        return el;
+      }
+
+      function search() {
+        var str = $('search').value
+          , links = $('files').all('a');
+
+        links.each(function(link){
+          var text = link.textContent;
+
+          if ('..' == text) return;
+          if (str.length && ~text.indexOf(str)) {
+            link.addClass('highlight');
+          } else {
+            link.removeClass('highlight');
+          }
+        });
+      }
+
+      $(window).on('content loaded', function(){
+        $('search').on('keyup', search);
+      });
+    </script>
+  </head>
+  <body class="directory">
+    <input id="search" type="text" placeholder="Search" autocomplete="off" />
+    <h1>This is the test template</h1>
+    <div id="wrapper">
+      <h1>{linked-path}</h1>
+      {files}
+    </div>
+  </body>
+</html>