Improved preformance for large directories. Changed build process.

* fixed tree fade-in-fade-out effect for small displays ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
* added custom scrollbar to tree ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
* fixed broken links caused by URI encoding/decoding ([issue #9](http://github.com/lrsjng/h5ai/issues/9))
* added "empty" to localization (hope Google Translate did a good job here)

.gitignore

@@ -2,7 +2,7 @@
 # Build folders to ignore
 bin
 build
-#target
+target
 
 build.local.*
 

LICENSE.txt

@@ -0,0 +1,19 @@
+Copyright (c) 2011 Lars Jung, http://larsjung.de
+
+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.

README.md

@@ -1,43 +1,13 @@
-# h5ai v0.9   ·   a beautified Apache index
+# h5ai v0.12   ·   a beautified Apache index
 
+h5ai tries to make browsing files on a Apache HTTP server more comfortable. It makes use of the
+built-in autoindex module of Apache and adds styles and functionality to the page generated by
+this module.  
+For installation instructions and documentation have a look at the [project page](http://larsjung.de/h5ai).
+There is also a [sample folder](http://larsjung.de/h5ai/sample).  
 
-## Screenshots
-
-<a href="http://larsjung.de/h5ai/sample/screenshots/h5ai-v0.7-details.png" target="_blank">
-	<img src="http://larsjung.de/h5ai/sample/screenshots/h5ai-v0.7-details.png" width="400px" alt="screenshot" title="details view" style="display: inline" />
-</a>
-&#160; &#160; &#160;
-<a href="http://larsjung.de/h5ai/sample/screenshots/h5ai-v0.7-icons.png" target="_blank">
-	<img src="http://larsjung.de/h5ai/sample/screenshots/h5ai-v0.7-icons.png" width="400px" alt="screenshot" title="icons view" style="display: inline" />
-</a>
-
-
-## Live example
-
-View a [sample folder](http://larsjung.de/h5ai/sample)  
-*(the files are all empty to save webspace)*
-
-
-## Install
-
-Everything you need is located in folder `target`.
-
-* Copy folder `h5ai` to the web-root directory of your server or alternativly set an alias `/h5ai/` to
-  this folder.
-* Add the content of file `dot.htaccess` to the `.htaccess` file inside the directory you want to be
-  styled (you might have to create this file). This directory and any subdirectories will be styled by h5ai.
-* Adjust `options.js` inside the `h5ai` folder to your needs. Defaults will be fine for a start.
-
-Optionally add `h5ai.header.html` and/or `h5ai.footer.html` files to any of the styled folders to [display
-custom top or bottom sections](http://larsjung.de/h5ai/sample/customize). The content of those files
-will be wrapped by `<header>` and `<footer>` tags.
-
-
-## License and References
-
-<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a>  
-[h5ai](http://larsjung.de/h5ai) is provided under the terms of the [CC BY-SA 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/).  
-It is based on
+[h5ai](http://larsjung.de/h5ai) is provided under the terms of the MIT License.  
+It uses
 [HTML5 Boilerplate](http://html5boilerplate.com),
 [jQuery](http://jquery.com),
 [Modernizr](http://www.modernizr.com) and
@@ -47,6 +17,40 @@ please respect their rights.
 
 ## Changelog
 
+### v0.12
+*2011-07-28*
+
+* improved performance
+
+
+### v0.11
+*2011-07-27*
+
+* changed license to MIT license, see `LICENSE.txt`
+
+
+### v0.10.2
+*2011-07-26*
+
+* improved tree scrollbar
+
+
+### v0.10.1
+*2011-07-24*
+
+* fixed problems with ' in links
+
+
+### v0.10
+*2011-07-24*
+
+* fixed problems with XAMPP on Windows (see `dot.htaccess` comments for instructions)
+* fixed tree fade-in-fade-out effect for small displays ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
+* added custom scrollbar to tree ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
+* fixed broken links caused by URI encoding/decoding ([issue #9](http://github.com/lrsjng/h5ai/issues/9))
+* added "empty" to localization (hope Google Translate did a good job here)
+
+
 ### v0.9
 *2011-07-18*
 

build.properties

@@ -3,7 +3,7 @@ custom                           = true
 
 # project
 project.name                     = h5ai
-project.version                  = 0.9
+project.version                  = 0.12
 
 
 # src
@@ -11,7 +11,8 @@ src.dir                          = src
 
 
 # build
-build.dir                        = target
+build.dir                        = build
+release.dir                      = release
 
 
 # libs

build.xml

@@ -22,6 +22,7 @@
 
 	<target name="clean" depends="init">
 		<delete dir="${build.dir}" />
+		<delete dir="${release.dir}" />
 	</target>
 
 
@@ -30,6 +31,7 @@
 		<copy todir="${build.dir}">
 		    <fileset dir="${src.dir}" />
 		</copy>
+		<copy file="LICENSE.txt" todir="${build.dir}" />
 		<replace dir="${build.dir}">
 			<replacefilter token="%BUILD%" value="${build.label}" />
 			<replacefilter token="%BUILD_NAME%" value="${project.name}" />
@@ -39,6 +41,13 @@
 
 		<scripp.dir dir="${build.dir}/h5ai/css" />
 		<scripp.dir dir="${build.dir}/h5ai/js" />
+
+		<!-- release -->
+		<mkdir dir="${release.dir}" />
+		<tar destfile="${release.dir}/${project.name}-${project.version}.tar" basedir="${build.dir}"/>
+		<gzip destfile="${release.dir}/${project.name}-${project.version}.tar.gz" src="${release.dir}/${project.name}-${project.version}.tar"/>
+		<delete file="${release.dir}/${project.name}-${project.version}.tar" />
+		<zip destfile="${release.dir}/${project.name}-${project.version}.zip" basedir="${build.dir}" />
 	</target>
 
 

src/dot.htaccess

@@ -8,7 +8,7 @@
 # Options  +FollowSymLinks
 
 
-<IfModule mod_headers.c>
+<IfModule headers_module>
 
 	################################
 	# cache images for 52 weeks
@@ -25,7 +25,13 @@
 # style auto index
 ################################
 
-<IfModule mod_autoindex.c>
+################################
+# IMPORTANT FOR XAMPP
+# if you're running XAMPP you might need to replace the
+# following line with
+# <IfModule autoindex_color_module>
+################################
+<IfModule autoindex_module>
 
 	################################
 	# uncomment the following line to force directory listing

src/h5ai/css/inc/tree.less

@@ -1,17 +1,31 @@
 
 #tree {
 	position: fixed;
-	left: -200px;
 	display: none;
 	left: 0;
 	top: 0;
 	overflow: auto;
 	font-size: 0.85em;
-	padding: 16px 32px 16px 16px;
+	padding: 16px 16px 16px 16px;
 	background-color: rgb(241,241,241);
 	border: 2px solid rgb(210,210,210);
 	border-left: none;
 	.border-radius ( 0 15px 15px 0 );
+
+	> .scrollbar {
+		margin: 12px 12px 12px 0;
+		width: 6px;
+		background-color: rgb(210,210,210);
+		.border-radius( 3px );
+	
+		.drag {
+			background-color: rgb(180,180,180);
+			.border-radius( 3px );
+		}
+		&.dragOn .drag {
+			background-color: rgb(150,150,150);
+		}
+	}
 	
 	.entry {
 		.blank, .indicator {

src/h5ai/footer.html

@@ -11,7 +11,7 @@
 			<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
 			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
 		</a>
-		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai %BUILD_VERSION%">h5ai %BUILD_VERSION%</a>
+		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION%</a>
 		<span class="l10n-footerUsing">using</span>
 		<a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
 	</footer>

src/h5ai/js/inc/h5ai.js

@@ -28,8 +28,7 @@ var H5ai = function ( options, langs, pathCache ) {
 	};
 	this.config = $.extend( {}, defaults, options );
 
-
-
+	
 	/*******************************
 	 * public api
 	 *******************************/
@@ -50,7 +49,7 @@ var H5ai = function ( options, langs, pathCache ) {
 
 	this.init = function () {
 
-		document.title = document.domain + decodeURI( document.location.pathname );
+		document.title = decodeURI( document.domain + document.location.pathname );
 
 		this.applyViewmode();
 		this.initBreadcrumb();
@@ -93,7 +92,7 @@ var H5ai = function ( options, langs, pathCache ) {
 		};
 		viewmode = this.getViewmode();
 
-		$( "body > nav li.view" ).hide().removeClass( "current" );
+		$( "#viewdetails,#viewicons" ).hide().removeClass( "current" );
 		
 		if ( this.config.viewmodes.length > 1 ) {
 			if ( $.inArray( "details", this.config.viewmodes ) >= 0 ) {
@@ -106,14 +105,11 @@ var H5ai = function ( options, langs, pathCache ) {
 
 		if ( viewmode === "details" ) {
 			$( "#viewdetails" ).closest( "li" ).addClass( "current" );
-			$( "#table" ).hide();
 			$( "#extended" ).addClass( "details-view" ).removeClass( "icons-view" ).show();
 		} else if ( viewmode === "icons" ) {
 			$( "#viewicons" ).closest( "li" ).addClass( "current" );
-			$( "#table" ).hide();
 			$( "#extended" ).removeClass( "details-view" ).addClass( "icons-view" ).show();
 		} else {
-			$( "#table" ).show();
 			$( "#extended" ).hide();
 		};
 	};
@@ -132,7 +128,7 @@ var H5ai = function ( options, langs, pathCache ) {
 		var path = pathCache.getPathForFolder( pathname );
 		$ul.append( path.updateCrumbHtml() );
 
-		var pathnameParts = decodeURI( document.location.pathname ).split( "/" );
+		var pathnameParts = document.location.pathname.split( "/" );
 		for ( idx in pathnameParts ) {
 			var part = pathnameParts[idx];
 			if ( part !== "" ) {
@@ -165,7 +161,10 @@ var H5ai = function ( options, langs, pathCache ) {
 			
 			$( "#tree" )
 				.css( "top", "" + ( navHeight + treeSpacing ) + "px" )
-				.css( "max-height", "" + ( winHeight - navHeight - footerHeight - 36 - 2 * treeSpacing ) + "px" );
+				.css( "height", "" + ( winHeight - navHeight - footerHeight - 36 - 2 * treeSpacing ) + "px" );
+			try {
+				$( "#tree" ).get( 0 ).updateScrollbar();
+			} catch ( err ) {};
 		};
 
 		$( window ).resize( function () {
@@ -176,17 +175,6 @@ var H5ai = function ( options, langs, pathCache ) {
 
 
 
-	/*******************************
-	 * table view
-	 *******************************/
-
-	this.initTableView = function () {
-
-		$( "#table td" ).removeAttr( "align" ).removeAttr( "valign" );
-	};
-
-
-
 	/*******************************
 	 * extended view
 	 *******************************/
@@ -225,17 +213,21 @@ var H5ai = function ( options, langs, pathCache ) {
 			$li.find( "a.size" ).prepend( $icon );
 		};
 
+		$.timer.log( "start entries" );
 		// entries
 		$( "#table td" ).closest( "tr" ).each( function () {
-			var path = pathCache.getPathForTableRow( decodeURI( document.location.pathname ), this );
+			var path = pathCache.getPathForTableRow( document.location.pathname, this );
 			$ul.append( path.updateExtendedHtml() );
 		} );
+		$.timer.log( "end  entries" );
+		$( "#table" ).remove();
 
 		$( "#extended" ).append( $ul );
+		console.log( "folders", $( "#extended .folder" ).size() , "files", $( "#extended .file" ).size() );
 
 		// empty
 		if ( $ul.children( ".entry:not(.parentfolder)" ).size() === 0 ) {
-			$( "#extended" ).append( $( "<div class='empty'>empty</div>" ) );
+			$( "#extended" ).append( $( "<div class='empty l10n-empty'>empty</div>" ) );
 		};
 
 		// in case of floats
@@ -250,7 +242,6 @@ var H5ai = function ( options, langs, pathCache ) {
 
 	this.initViews = function () {
 
-		this.initTableView();
 		this.initExtendedView();
 
 		$( "#viewdetails" ).closest( "li" )
@@ -303,12 +294,9 @@ var H5ai = function ( options, langs, pathCache ) {
 			} else if ( browserLang.length > 2 &&  data[ browserLang.substr( 0, 2 ) ] !== undefined  ) {
 				lang = browserLang.substr( 0, 2 );
 			};
-			if ( lang === "en" ) {
-				lang = undefined;
-			};
 		};
 
-		if ( data[ lang ] !== undefined ) {
+		if ( lang !== "en" && data[ lang ] !== undefined ) {
 			var selected = data[ lang ];
 			for ( key in selected ) {
 				$( ".l10n-" + key ).text( selected[key] );

src/h5ai/js/inc/jquery.mousewheel.min.js

@@ -0,0 +1,11 @@
+/* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ *
+ * Version: 3.0.2
+ * 
+ * Requires: 1.2.2+
+ */
+(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);

src/h5ai/js/inc/path.js

@@ -1,46 +1,42 @@
 
+var pathnameSplitRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
+var pathEndsWithSlashRegEx = /\/$/;
 
 var PathCache = function () {
 
-	
-	var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
+
+	this.cache = {};
+	this.objectCache = {};
+
 
 	this.splitPathname = function ( pathname ) {
 		
 		if ( pathname === "/"  ) {
 			return [ "", "/" ];
 		};
-		var match = pathnameRegEx.exec( pathname );
+		var match = pathnameSplitRegEx.exec( pathname );
 		return [ match[1], match[3] ];
 	};
-
-
-	this.cache = {};
-
-
+	
+	
 	this.loadCache = function () {
 
 		var json = localStorage.getItem( "h5ai.cache" );
 		var objs = $.evalJSON( json );
-		var cache = {};
+		var objectCache = {};
 		for ( idx in objs ) {
 			var obj = objs[idx];
-			var path = this.objectToPath( obj );
-			cache[path.absHref] = path;
+			objectCache[obj.r] = obj;
 		};
-		console.log( "loaded: ", cache );
-		return cache;
+		return objectCache;
 	};
 
 
 	this.storeCache = function () {
 
 		var objs = [];
-		for ( ref in this.cache ) {
-			var path = this.cache[ref];
-			if ( path.isFolder ) {
-				objs.push( this.pathToObject( path ) );
-			};
+		for ( ref in this.objectCache ) {
+			objs.push( this.objectCache[ref] );
 		};
 		var json = $.toJSON( objs ); 
 		localStorage.setItem( "h5ai.cache", json );
@@ -78,45 +74,103 @@ var PathCache = function () {
 		};
 		return path;
 	};
-	
+
+
+	this.getAbsHref = function ( folder, tableRow ) {
+		
+		if ( ! pathEndsWithSlashRegEx.test( folder ) ) {
+			folder += "/";
+		};
+		
+		if ( tableRow === undefined ) {
+			return folder;
+		};
+		
+		var $a = $( tableRow ).find( "td" ).eq( 1 ).find( "a" );
+		var isParentFolder = ( $a.text() === "Parent Directory" );
+		var href = $a.attr( "href" );
+		return isParentFolder ? undefined : folder + href;
+	};
+
 
 	this.getPathForFolder = function ( folder ) {
 
-		return this.getCachedPath( new Path( this, folder ) );
+		var absHref = this.getAbsHref( folder );
+		
+		var cachedPath = this.cache[absHref];
+		if ( cachedPath !== undefined ) {
+			return cachedPath;
+		};
+
+		var path = new Path( this, folder );
+		this.cache[path.absHref] = path;
+
+		var obj = this.objectCache[absHref];
+		if ( obj !== undefined ) {
+			path.status = obj.s;
+			path.content = {};
+			path.treeOpen = obj.o;
+			for ( idx in obj.c ) {
+				var href = obj.c[idx];
+				path.content[href] = this.getPathForFolder( href );
+			};
+		} else {
+			var obj = this.pathToObject( path );
+			this.objectCache[obj.r] = obj;
+			this.storeCache();
+		};
+
+		return path;
 	};
 
 
 	this.getPathForTableRow = function ( parentFolder, tableRow ) {
 
-		return this.getCachedPath( new Path( this, parentFolder, tableRow ) );
-	};
-
-
-	this.getCachedPath = function ( path ) {
-
-		if ( path.isParentFolder ) {
-			return path;
-		};
-
-		var cachedPath = this.cache[path.absHref];
+		var absHref = this.getAbsHref( parentFolder, tableRow );
+		
+		var cachedPath = this.cache[absHref];
 		if ( cachedPath !== undefined ) {
 			return cachedPath;
 		};
+		
+		var path = new Path( this, parentFolder, tableRow );
+		if ( ! path.isParentFolder ) {
+			this.cache[path.absHref] = path;
+
+			var obj = this.objectCache[absHref];
+			if ( obj !== undefined ) {
+				path.status = obj.s;
+				path.content = {};
+				path.treeOpen = obj.o;
+				for ( idx in obj.c ) {
+					var href = obj.c[idx];
+					path.content[href] = this.getPathForFolder( href );
+				};
+			} else {
+				if ( path.isFolder && path.status !== undefined ) {
+					var obj = this.pathToObject( path );
+					this.objectCache[obj.r] = obj;
+					this.storeCache();
+				};
+			};
+		};
 
-		this.cache[path.absHref] = path;
-		this.storeCache();
 		return path;
 	};
 
-	this.cache = this.loadCache();
+
+	this.objectCache = this.loadCache();
 
 };
 
 
 
+
+
+
 var Path = function ( pathCache, folder, tableRow ) {
 
-	if ( ! /\/$/.test( folder ) ) {
+	if ( ! pathEndsWithSlashRegEx.test( folder ) ) {
 		folder += "/";
 	};
 
@@ -129,25 +183,25 @@ var Path = function ( pathCache, folder, tableRow ) {
 		this.icon16 = $img.attr( "src" );
 		this.alt = $img.attr( "alt" );
 		this.label = $a.text();
-		this.href = decodeURI( $a.attr("href") );
+		this.href = $a.attr("href");
 		this.date = $tds.eq( 2 ).text();
 		this.size = $tds.eq( 3 ).text();
 	} else {
 		var splits = pathCache.splitPathname( folder );
 
 		this.parentFolder = splits[0];
-		this.label = splits[1];
+		this.href = splits[1];
+		this.label = decodeURI( splits[1] );
 		this.icon16 = "/h5ai/icons/16x16/folder.png";
 		this.alt = "[DIR]";
-		this.href = this.label;
 		this.date = "";
 		this.size = "";			
 		if ( this.label === "/" ) {
-			this.label = document.domain + "/";
+			this.label = decodeURI( document.domain ) + "/";
 		};
 	};
 
-	if ( /\/$/.test( this.label ) ) {
+	if ( pathEndsWithSlashRegEx.test( this.label ) ) {
 		this.label = this.label.slice( 0, -1 );
 	};
 
@@ -155,14 +209,14 @@ var Path = function ( pathCache, folder, tableRow ) {
 	this.isFolder = ( this.alt === "[DIR]" );
 	this.isParentFolder = ( this.isFolder && this.label === "Parent Directory" );
 	this.absHref = this.isParentFolder ? this.href : this.parentFolder + this.href;
-	this.isCurrentFolder = ( this.absHref === decodeURI( document.location.pathname ) );
+	this.isCurrentFolder = ( this.absHref === document.location.pathname );
 	this.isDomain = ( this.absHref === "/" );
 
 	if ( this.isParentFolder && h5ai.config.setParentFolderLabels ) {
 		if ( this.isDomain ) {
 			this.label = decodeURI( document.domain );
 		} else {
-			this.label = pathCache.splitPathname( pathCache.splitPathname( this.parentFolder )[0] )[1].slice( 0, -1 );
+			this.label = decodeURI( pathCache.splitPathname( pathCache.splitPathname( this.parentFolder )[0] )[1].slice( 0, -1 ) );
 		};
 	};
 
@@ -224,24 +278,32 @@ var Path = function ( pathCache, folder, tableRow ) {
 
 	this.updateCrumbHtml = function () {
 
+		if ( this.html.$crumb !== undefined && this.html.$crumb.data( "status" ) === this.status ) {
+			return this.html.$crumb;
+		};
+
 		var $html = $( "<li class='crumb' />" ).data( "path", this );
+		if ( this.status !== undefined ) {
+			$html.data( "status", this.status );
+		};
 
 		try {
 			$html.addClass( this.isFolder ? "folder" : "file" );
-			var $a = $( "<a href='" + this.absHref + "'><img src='/h5ai/images/crumb.png' alt='>' />" + this.label + "</a>" );
+			var $a = $( "<a><img src='/h5ai/images/crumb.png' alt='>' />" + this.label + "</a>" );
+			$a.attr( "href", this.absHref );
 			$a.click( $.proxy( function() { this.onClick( "crumb" ); }, this ) );
 			$a.hover( $.proxy( function() { this.onHoverIn( "crumb" ); }, this ), $.proxy( function() { this.onHoverOut( "crumb" ); }, this ) );
 			$html.append( $a );
-			
+
 			if ( this.isDomain ) {
 				$html.addClass( "domain" );
 				$a.find( "img" ).attr( "src", "/h5ai/images/home.png" );
 			};
-			
+
 			if ( this.isCurrentFolder ) {
 				$html.addClass( "current" );
 			};
-			
+
 			if ( !isNaN( this.status ) ) {
 				if ( this.status === 200 ) {
 					$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
@@ -250,7 +312,6 @@ var Path = function ( pathCache, folder, tableRow ) {
 				};
 			};
 		} catch( err ) {
-			console.log( "updateCrumbHtml failed",  err );
 			$( "<span class='fail'>failed</span>" ).appendTo( $html );
 		};
 
@@ -265,11 +326,19 @@ var Path = function ( pathCache, folder, tableRow ) {
 
 	this.updateExtendedHtml = function () {
 
+		if ( this.html.$extended !== undefined && this.html.$extended.data( "status" ) === this.status ) {
+			return this.html.$extended;
+		};
+		
 		var $html = $( "<li class='entry' />" ).data( "path", this );
+		if ( this.status !== undefined ) {
+			$html.data( "status", this.status );
+		};
 
 		try {
 			$html.addClass( this.isFolder ? "folder" : "file" );
-			var $a = $( "<a href='" + this.href + "' />" ).appendTo( $html );
+			var $a = $( "<a />" ).appendTo( $html );
+			$a.attr( "href", this.absHref );
 			$a.click( $.proxy( function() { this.onClick( "extended" ); }, this ) );
 			$a.hover( $.proxy( function() { this.onHoverIn( "extended" ); }, this ), $.proxy( function() { this.onHoverOut( "extended" ); }, this ) );
 
@@ -297,7 +366,6 @@ var Path = function ( pathCache, folder, tableRow ) {
 				};
 			};
 		} catch( err ) {
-			console.log( "updateExtendedHtml failed",  err );
 			$( "<span class='fail'>failed</span>" ).appendTo( $html );
 		};
 
@@ -317,10 +385,11 @@ var Path = function ( pathCache, folder, tableRow ) {
 
 		try {
 			$html.addClass( this.isFolder ? "folder" : "file" );
-			var $a = $( "<a href='" + this.absHref + "' />" )
+			var $a = $( "<a />" )
 				.appendTo( $html )
 				.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
 				.append( $( "<span class='label'>" + this.label + "</span>" ) );
+			$a.attr( "href", this.absHref );
 			$a.click( $.proxy( function() { this.onClick( "tree" ); }, this ) );
 			$a.hover( $.proxy( function() { this.onHoverIn( "tree" ); }, this ), $.proxy( function() { this.onHoverOut( "tree" ); }, this ) );
 
@@ -339,16 +408,28 @@ var Path = function ( pathCache, folder, tableRow ) {
 								this.status = status;
 								this.content = content;
 								this.treeOpen = true;
-								this.updateTreeHtml();
+								pathCache.objectCache[this.absHref] = pathCache.pathToObject( this );
+								$( "#tree" ).get( 0 ).updateScrollbar( true );
+								this.updateTreeHtml( function() {
+									$( "#tree" ).get( 0 ).updateScrollbar();
+								} );
 							}, this ) );
 						} else if ( $indicator.hasClass( "open" ) ) {
 							this.treeOpen = false;
+							pathCache.objectCache[this.absHref] = pathCache.pathToObject( this );
 							$indicator.removeClass( "open" );
-							$html.find( "> ul.content" ).slideUp();
+							$( "#tree" ).get( 0 ).updateScrollbar( true );
+							$html.find( "> ul.content" ).slideUp( function() {
+								$( "#tree" ).get( 0 ).updateScrollbar();
+							} );
 						} else {
 							this.treeOpen = true;
+							pathCache.objectCache[this.absHref] = pathCache.pathToObject( this );
 							$indicator.addClass( "open" );
-							$html.find( "> ul.content" ).slideDown();				
+							$( "#tree" ).get( 0 ).updateScrollbar( true );
+							$html.find( "> ul.content" ).slideDown( function() {
+								$( "#tree" ).get( 0 ).updateScrollbar();
+							} );				
 						};
 					}, this ) );
 					$blank.replaceWith( $indicator );
@@ -389,7 +470,6 @@ var Path = function ( pathCache, folder, tableRow ) {
 				};
 			};
 		} catch( err ) {
-			console.log( "updateTreeHtml failed",  err );
 			$( "<span class='fail'>failed</span>" ).appendTo( $html );
 		};
 

src/h5ai/js/inc/tree.js

@@ -38,11 +38,19 @@ var Tree = function ( pathCache, h5ai ) {
 
 		var $tree = $( "#tree" );
 		var $extended = $( "#extended" );
-		var shiftTree = function ( show ) {
-			if ( $tree.outerWidth() < $extended.offset().left || show === true ) {
-				$tree.stop().animate( { left: 0 } );										
+		var shiftTree = function ( forceVisible, dontAnimate ) {
+			if ( $tree.outerWidth() < $extended.offset().left || forceVisible === true ) {
+				if ( dontAnimate === true ) {
+					$tree.stop().css( { left: 0 } );															
+				} else {
+					$tree.stop().animate( { left: 0 } );										
+				};
 			} else {
-				$tree.stop().animate( { left: 18 - $tree.outerWidth() } );					
+				if ( dontAnimate === true ) {
+					$tree.stop().css( { left: 18 - $tree.outerWidth() } );					
+				} else {
+					$tree.stop().animate( { left: 18 - $tree.outerWidth() } );					
+				};
 			};
 		};
 
@@ -51,9 +59,11 @@ var Tree = function ( pathCache, h5ai ) {
 			shiftTree();
 		} );
 
-		this.fetchTree( decodeURI( document.location.pathname ), function( path ) {
-			$tree.append( path.updateTreeHtml() ).show();
-			shiftTree();
+		this.fetchTree( document.location.pathname, function( path ) {
+			$tree.append( path.updateTreeHtml() );
+			$tree.show();
+			scrollpanel( $tree );
+			shiftTree( false, true );
 		} );
 	};
 
@@ -151,4 +161,127 @@ var Tree = function ( pathCache, h5ai ) {
 			}
 		} );
 	};
+
+
+	var scrollpanel = function ( htmlElement ) {
+
+		var $element = $( htmlElement );
+		
+		if ( $element.css( "position" ) === undefined || $element.css( "position" ) === "static" ) {
+			$element.css( "position", "relative" );
+		};
+
+		var $scrollbar = $( "<div class='scrollbar' />" );
+		var $drag = $( "<div class='drag' />" ).appendTo( $scrollbar );
+		$element
+			.wrapInner( "<div class='wrapper'><div class='content' /></div>" )
+			.append( $scrollbar );
+		var $wrapper = $element.find( "> .wrapper" );
+		var $content = $wrapper.find( "> .content" );
+		var mouseOffsetY = 0;
+		var updateId = undefined;
+
+		var update = function ( repeat ) {
+			if ( updateId !== undefined && !repeat ) {
+				clearInterval( updateId );
+				updateId = undefined;
+			} else if ( updateId === undefined && repeat ) {
+				updateId = setInterval( function() { update( true ); }, 50 );
+			};
+
+			$wrapper.css( "height", $element.height() );
+			var visibleHeight = $element.height();
+			var contentHeight = $content.outerHeight();
+			var scrollTop = $wrapper.scrollTop();
+			var scrollTopFrac = scrollTop / contentHeight;
+			var visVertFrac = Math.min( visibleHeight / contentHeight, 1 );
+			
+			if ( visVertFrac < 1 ) {
+				$scrollbar
+					.fadeIn( 50 )
+					.css( {
+						height: $element.innerHeight() + $scrollbar.height() - $scrollbar.outerHeight( true )
+					} );
+				$drag
+					.css( {
+						top: $scrollbar.height() * scrollTopFrac,
+						height: $scrollbar.height() * visVertFrac
+					} );
+			} else {
+				$scrollbar.fadeOut( 50 );
+			};
+		};
+		var scroll = function ( event ) {
+			var clickFrac = ( event.pageY - $scrollbar.offset().top - mouseOffsetY ) / $scrollbar.height();
+			$wrapper.scrollTop( $content.outerHeight() * clickFrac );
+			update();
+		};
+
+		$element
+			.mousewheel( function ( event, delta) {
+				$wrapper.scrollTop( $wrapper.scrollTop() - 50 * delta );
+				update();
+				event.stopPropagation();
+				event.preventDefault();
+			} )
+			.scroll( update );
+		$element.get( 0 ).updateScrollbar = update;
+		$wrapper
+			.css( {
+				"padding-right": $scrollbar.outerWidth( true ),
+				height: $element.height(),
+				overflow: "hidden"
+			} );
+		$scrollbar
+			.css( {
+				position: "absolute",
+				top: 0,
+				right: 0,
+				overflow: "hidden"
+			} )
+			.mousedown( function ( event ) {
+				mouseOffsetY = $drag.outerHeight() / 2;
+				scroll( event );
+				$scrollbar.addClass( "dragOn" );
+				$( window )
+					.bind( "mousemove", scroll )
+					.one( "mouseup", function ( event ) {
+						$scrollbar.removeClass( "dragOn" );
+						$( window ).unbind( "mousemove", scroll );
+						scroll( event );
+						event.stopPropagation();
+					} );
+				event.stopPropagation();
+			} )
+			.attr( "unselectable", "on" )
+			.css( "-moz-user-select", "none" )
+			.each( function () { 
+				this.onselectstart = function () {
+					return false;
+				};
+			} );
+		$drag
+			.css( {
+				position: "absolute",
+				left: 0,
+				width: "100%"
+			} )
+			.mousedown( function ( event ) {
+				mouseOffsetY = event.pageY - $drag.offset().top;
+				scroll( event );
+				$scrollbar.addClass( "dragOn" );
+				$( window )
+					.bind( "mousemove", scroll )
+					.one( "mouseup", function ( event ) {
+						$scrollbar.removeClass( "dragOn" );
+						$( window ).unbind( "mousemove", scroll );
+						scroll( event );
+						event.stopPropagation();
+					} );
+				event.stopPropagation();
+			} );
+
+		update();
+	};
+
 };

src/h5ai/js/main.js

@@ -1,16 +1,32 @@
 ( function( $ ) {
 
 	// @include "inc/jquery.json.min.js"
+	// @include "inc/jquery.mousewheel.min.js"
 	// @include "inc/path.js"
 	// @include "inc/h5ai.js"
 	// @include "inc/tree.js"
 
+	
+	var Timer = function () {
+
+		this.start = new Date().getTime();;
+		this.last = this.start;
+		this.log = function ( label ) {
+			var now = new Date().getTime();
+			console.log( "timer", label, "+" + (now - this.last), "=" + (now - this.start) );
+			this.last = now;
+		};
+	};
+	$.timer = new Timer();
+
 
 	/*******************************
 	 * create
 	 *******************************/
 
+	$.timer.log( "start pathcache" );
 	var pathCache = new PathCache();
+	$.timer.log( "end   pathcache" );
 	var h5ai = new H5ai( h5aiOptions, h5aiLangs, pathCache );
 	var tree = new Tree( pathCache, h5ai );
 
@@ -23,22 +39,21 @@
 		click: $.proxy( h5ai.pathClick, h5ai )
 	};
 
-	$( ".l10n-footerUsing" ).click( function () {
-		console.log( "clean" );
-		pathCache.cache = {};
-		console.log( "store" );
-		pathCache.storeCache();
-		console.log( "load", pathCache.loadCache() );
-	} );
-
-	
 	/*******************************
 	 * init after dom load
 	 *******************************/
 
 	$( function() {
 		h5ai.init();
-		tree.init();
-	} );
+		tree.init();	
 
+		// just for testing, resets the local cache /////////
+		$( ".l10n-footerUsing" ).click( function () {
+			pathCache.cache = {};
+			pathCache.objectCache = {};
+			pathCache.storeCache();
+		} );
+		/////////////////////////////////////////////////////
+	} );
+	
 } )( jQuery );

src/h5ai/options.js

@@ -80,7 +80,8 @@ h5aiLangs = {
 		columnLastModified: "Last modified",
 		columnSize: "Size",
 		footerUsing: "using",
-		parentDirectory: "Parent Directory"
+		parentDirectory: "Parent Directory",
+		empty: "empty"
 	},
 
 	"de": {
@@ -90,7 +91,8 @@ h5aiLangs = {
 		columnLastModified: "Geändert",
 		columnSize: "Größe",
 		footerUsing: "nutzt",
-		parentDirectory: "Übergeordnetes Verzeichnis"
+		parentDirectory: "Übergeordnetes Verzeichnis",
+		empty: "leer"
 	},
 	
 	"fr": {
@@ -100,7 +102,8 @@ h5aiLangs = {
 		columnLastModified: "Dernière modification",
 		columnSize: "Taille",
 		footerUsing: "utilise",
-		parentDirectory: "Dossier parent"
+		parentDirectory: "Dossier parent",
+		empty: "vide"
 	},
 
 	"nl": {
@@ -110,7 +113,8 @@ h5aiLangs = {
 		columnLastModified: "Laatste wijziging",
 		columnSize: "Grootte",
 		footerUsing: "gebruikt",
-		parentDirectory: "Bovenliggende map"
+		parentDirectory: "Bovenliggende map",
+		empty: "lege"
 	},
 
 	"sv": {
@@ -120,7 +124,30 @@ h5aiLangs = {
 		columnLastModified: "Senast ändrad",
 		columnSize: "Filstorlek",
 		footerUsing: "använder",
-		parentDirectory: "Till överordnad mapp"
-	}
+		parentDirectory: "Till överordnad mapp",
+		empty: "tom"
+	},
 
+	"cs": {
+		viewDetails: "podrobnosti",
+		viewIcons: "ikony",
+		columnName: "Název",
+		columnLastModified: "Upraveno",
+		columnSize: "Velikost",
+		footerUsing: "používá",
+		parentDirectory: "Nadřazený adresář",
+		empty: "prázdný"
+	},
+
+	"sk": {
+		viewDetails: "podrobnosti",
+		viewIcons: "ikony",
+		columnName: "Názov",
+		columnLastModified: "Upravené",
+		columnSize: "Velkosť",
+		footerUsing: "používá",
+		parentDirectory: "Nadriadený priečinok",
+		empty: "prázdny"
+	}
+	
 };

target/dot.htaccess

@@ -1,140 +0,0 @@
-################################
-# h5ai 0.9
-# customized .htaccess
-################################
-
-
-# Options  +Indexes
-# Options  +FollowSymLinks
-
-
-<IfModule mod_headers.c>
-
-	################################
-	# cache images for 52 weeks
-	################################
-
-	<FilesMatch "\.png$">
-		Header set Cache-Control "max-age=31449600, public"
-	</FilesMatch>
-
-</IfModule>
-
-
-################################
-# style auto index
-################################
-
-<IfModule mod_autoindex.c>
-
-	################################
-	# uncomment the following line to force directory listing
-	# even for directories with valid index files
-	################################
-
-	# DirectoryIndex       IGNORE-DEFAULT-INDEX-FILES
-
-
-	################################
-	# h5ai header and footer
-	################################
-
-	HeaderName           /h5ai/header.html
-	ReadmeName           /h5ai/footer.html
-
-
-	################################
-	# hide h5ai folder and config files from index
-	################################
-
-	IndexIgnore          h5ai  h5ai.header.html  h5ai.footer.html
-
-
-	################################
-	# table options
-	################################
-
-	IndexOrderDefault    Ascending Name
-
-	IndexOptions         Type=text/html;h5ai=0.9
-	IndexOptions         Charset=UTF-8
-	IndexOptions         FancyIndexing
-	IndexOptions         HTMLTable
-	IndexOptions         XHTML
-	IndexOptions         SuppressHTMLPreamble
-	IndexOptions         SuppressRules
-	IndexOptions         SuppressDescription
-	IndexOptions         FoldersFirst
-	IndexOptions         IgnoreCase
-	IndexOptions         IconsAreLinks
-	IndexOptions         VersionSort
-	IndexOptions         NameWidth=*
-
-
-	################################
-	# icon mapping
-	################################
-
-	AddIcon              /h5ai/icons/16x16/parent.png      ..
-	AddIcon              /h5ai/icons/16x16/folder.png      ^^DIRECTORY^^
-	AddIcon              /h5ai/icons/16x16/blank.png       ^^BLANKICON^^
-
-	AddIcon              /h5ai/icons/16x16/readme.png      README
-	AddIcon              /h5ai/icons/16x16/copying.png     COPYING  LICENSE
-	AddIcon              /h5ai/icons/16x16/install.png     INSTALL
-	AddIcon              /h5ai/icons/16x16/authors.png     AUTHORS
-	AddIcon              /h5ai/icons/16x16/log.png         LOG  Log  log
-
-	AddIcon              /h5ai/icons/16x16/css.png         .less
-	AddIcon              /h5ai/icons/16x16/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
-	AddIcon              /h5ai/icons/16x16/makefile.png    .pom  pom.xml  build.xml
-	AddIcon              /h5ai/icons/16x16/bin.png         .so  .o
-
-	AddIcon              /h5ai/icons/16x16/archive.png     .tar.gz  .tgz  .tar.bz2
-	AddIcon              /h5ai/icons/16x16/zip.png         .zip  .Z  .z  .jar  .war  .gz  .bz2
-	AddIcon              /h5ai/icons/16x16/tar.png         .tar
-	AddIcon              /h5ai/icons/16x16/pdf.png         .pdf
-	AddIcon              /h5ai/icons/16x16/deb.png         .deb
-	AddIcon              /h5ai/icons/16x16/rpm.png         .rpm
-	AddIcon              /h5ai/icons/16x16/cd.png          .iso  .cue
-
-	AddIconByType        /h5ai/icons/16x16/png.png         image/png
-	AddIconByType        /h5ai/icons/16x16/jpg.png         image/jpeg
-	AddIconByType        /h5ai/icons/16x16/gif.png         image/gif
-	AddIconByType        /h5ai/icons/16x16/ico.png         image/x-icon
-	AddIconByType        /h5ai/icons/16x16/bmp.png         image/x-ms-bmp
-
-	AddIconByType        /h5ai/icons/16x16/html.png        text/html
-	AddIconByType        /h5ai/icons/16x16/css.png         text/css
-	AddIconByType        /h5ai/icons/16x16/xml.png         application/xml
-	AddIconByType        /h5ai/icons/16x16/js.png          application/javascript  application/json
-	AddIconByType        /h5ai/icons/16x16/php.png         application/x-httpd-php
-
-	AddIconByType        /h5ai/icons/16x16/py.png          text/x-python
-	AddIconByType        /h5ai/icons/16x16/rb.png          application/x-ruby
-	AddIconByType        /h5ai/icons/16x16/java.png        text/x-java
-	AddIconByType        /h5ai/icons/16x16/cpp.png         text/x-c++src
-	AddIconByType        /h5ai/icons/16x16/hpp.png         text/x-c++hdr
-	AddIconByType        /h5ai/icons/16x16/c.png           text/x-csrc
-	AddIconByType        /h5ai/icons/16x16/h.png           text/x-chdr
-
-	AddIconByType        /h5ai/icons/16x16/pdf.png         application/pdf
-
-	AddIconByType        /h5ai/icons/16x16/rtf.png         text/rtf  application/rtf
-	AddIconByType        /h5ai/icons/16x16/tex.png         text/x-tex
-	AddIconByType        /h5ai/icons/16x16/makefile.png    text/x-makefile
-
-	AddIconByType        /h5ai/icons/16x16/bin.png         application/java-vm
-	AddIconByType        /h5ai/icons/16x16/exe.png         application/x-executable application/x-msdos-program
-
-	AddIconByType        /h5ai/icons/16x16/text.png        text/*
-	AddIconByType        /h5ai/icons/16x16/image.png       image/*
-	AddIconByType        /h5ai/icons/16x16/audio.png       audio/*
-	AddIconByType        /h5ai/icons/16x16/video.png       video/*
-
-	AddIconByEncoding    /h5ai/icons/16x16/zip.png         x-compress  x-gzip  x-bzip2
-
-	DefaultIcon          /h5ai/icons/16x16/unknown.png
-
-</IfModule>
-

target/h5ai/footer.html

@@ -1,23 +0,0 @@
-			<!-- generated code ends here -->
-		</section>
-		<section id="extended"></section>
-		<footer></footer>
-	</section>
-	<section id="tree"></section>
-	<footer>
-		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & CSS3">
-			<img class="logo" src="/h5ai/images/html5.png" alt="html5" />
-			<img class="techclass" src="/h5ai/images/html5-semantics.png" alt="html5-semantics" />
-			<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
-			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
-		</a>
-		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.9">h5ai 0.9</a>
-		<span class="l10n-footerUsing">using</span>
-		<a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
-	</footer>
-	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
-	<script>window.jQuery || document.write( '<script src="/h5ai/js/lib/jquery.min.js"><\/script>' )</script>
-	<script src="/h5ai/options.js"></script>
-	<script src="/h5ai/js/main.js"></script>
-</body>
-</html>

target/h5ai/header.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js">
-<head>
-	<meta charset="utf-8">
-	<title>Directory index · styled with h5ai</title>
-	<meta name="h5ai-version" content="h5ai 0.9">
-	<meta name="description" content="Directory index styled with h5ai (http://larsjung.de/h5ai)">
-	<meta name="keywords" content="directory, index, autoindex, h5ai">
-	<link rel="shortcut icon" type="image/png" href="/h5ai/images/h5ai-16x16.png">
-	<link rel="apple-touch-icon" type="image/png" href="/h5ai/images/h5ai-48x48.png">
-	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
-	<link rel="stylesheet" type="text/css" href="/h5ai/css/main.css">
-	<script src="/h5ai/js/lib/modernizr.min.js"></script>
-</head>
-<body>
-	<nav class="clearfix">
-		<span class="jsDisabledFallback">Directory index · JavaScript is disabled</span>
-		<ul>
-			<li id="viewicons" class="view">
-				<a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" /><span class="l10n-viewIcons">icons</span></a>
-			</li>
-			<li id="viewdetails" class="view" >
-				<a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-viewDetails">details</span></a>
-			</li>
-		</ul>
-	</nav>
-	<section id="content">
-		<header></header>
-		<section id="table" class="jsDisabledFallback">
-			<!--
-				The following code was generated by apache's autoindex module. It is not valid HTML 5 for the
-				reason, that 'align' and 'valign' attributes on the td element are obsolete. Both of them are
-				removed via javascript. The actual page should render as perfect HTML 5, even if the produced
-				source is not valid HTML 5.
-			-->