Finally decided to release v0.9. Totally flushed by the feedback of the last 2 days. Thanks. See README.md for changes.

README.md

@@ -1,4 +1,4 @@
-# h5ai v0.8   ·   a beautified Apache index
+# h5ai v0.9   ·   a beautified Apache index
 
 
 ## Screenshots
@@ -47,6 +47,18 @@ please respect their rights.
 
 ## Changelog
 
+### v0.9
+*2011-07-18*
+
+* linked hover states between crumb, extended view and tree
+* fixed size of tree view (now there's a ugly scrollbar, hopefully will be fixed)
+* refactored js to improve performance and cleaned code
+* added caching for folder status codes and content
+* added fr translation by [Nicolas](http://github.com/Nicosmos)
+* added nl translation by [Stefan de Konink](http://github.com/skinkie)
+* added sv translation by Oscar Carlsson
+
+
 ### v0.8
 *2011-07-08*
 

build.properties

@@ -3,7 +3,7 @@ custom                           = true
 
 # project
 project.name                     = h5ai
-project.version                  = 0.8
+project.version                  = 0.9
 
 
 # src

src/h5ai/css/inc/extended.less

@@ -12,16 +12,15 @@
 			white-space: nowrap;
 			clear: both;
 
-			&.header a {
+			&.header {
+				a, a:active, a:visited {
 					padding-bottom: 18px;
 					color: #555;
+					text-decoration: none;
 					opacity: 0.4;
 					cursor: pointer;
 					.transition( all 0.2s ease-in-out );
 	
-				&:visited {
-					color: #555;
-				}
 					&:hover {
 						color: #555;
 						opacity: 0.9;
@@ -32,31 +31,37 @@
 						padding: 0 8px;
 					}
 				}
+			}
 			&.entry {
 				border-bottom: 1px solid #ddd;
 
-				a {
+				a, a:active, a:visited {
 					display: block;
+					color: #555;
+					text-decoration: none;
 					cursor: pointer;
 					
-					&:hover {
+					&:hover, &.hover {
 						background-color: #f6f6f6;
 						color: #e80;
 					}
 				}
 				&.error {
-					> a, > a:visited {
+					a, a:active, a:visited {
-						color: #999;
+						color: #aaa;
 					
 						.label {
-							opacity: 0.7;
-
 							.hint {
+								margin-left: 12px;
 								font-size: 0.9em;
-								font-style: italic;
 								color: #c55;
 							}
 						}
+						&:hover, &.hover {
+							opacity: 1;
+							background-color: #f6f6f6;
+							color: #e80;
+						}
 					}
 				}
 			}
@@ -115,7 +120,7 @@
 
 #extended.icons-view {
 	display: none;
-	padding: 10px;
+	padding: 3px;
 	border: 1px solid #eee;
 	border-radius: 15px;
 
@@ -131,7 +136,7 @@
 			&.entry {
 				float: left;
 
-				a {
+				a, a:active, a:visited {
 					display: block;
 					margin: 8px;
 					padding: 8px;
@@ -139,12 +144,14 @@
 					height: 120px;
 					float: left;
 					text-align: center;
+					text-decoration: none;
 					overflow: hidden;
 					border-radius: 5px;
+					color: #555;
 					cursor: pointer;
 					border: 2px solid rgba(0,0,0,0);
 			
-					&:hover {
+					&:hover, &.hover {
 						color: #e80;
 						border-color: #eee;
 						background-color: #f6f6f6;
@@ -170,18 +177,22 @@
 					}
 				}
 				&.error {
-					> a, > a:visited {
+					a, a:active, a:visited {
-						color: #999;
+						color: #aaa;
+						text-decoration: none;
 					
 						.label {
-							opacity: 0.7;
-
 							.hint {
+								padding: 0 6px;
 								font-size: 0.9em;
-								font-style: italic;
 								color: #c55;
 							}
 						}
+						&:hover, &.hover {
+							color: #e80;
+							border-color: #eee;
+							background-color: #f6f6f6;
+						}
 					}
 				}
 			}

src/h5ai/css/inc/tree.less

@@ -2,7 +2,10 @@
 #tree {
 	position: fixed;
 	left: -200px;
-	top: 80px;
+	display: none;
+	left: 0;
+	top: 0;
+	overflow: auto;
 	font-size: 0.85em;
 	padding: 16px 32px 16px 16px;
 	background-color: rgb(241,241,241);
@@ -43,15 +46,18 @@
 				opacity: 0.3;
 			}
 		}
-		> a, > a.visited {
+		> a, > a:active, > a.visited {
 			margin-left: 16px;
 			padding: 4px 6px;
 			border: 1px solid rgba(0,0,0,0);
 			.border-radius( 5px );
 			display: block;
+			color: #555;
+			text-decoration: none;
 			opacity: 0.7;
 
-			&:hover {
+			&:hover, &.hover {
+				color: #e80;
 				background-color: rgba(255,255,255,0.5);
 				opacity: 1;
 			}
@@ -70,7 +76,6 @@
 			.hint {
 				display: inline-block;
 				margin-left: 12px;
-				font-style: italic;
 				font-size: 0.9em;
 				color: #ccc;
 				img {
@@ -84,15 +89,18 @@
 			display: none;
 		}
 		&.current {
-			> a, > a:visited {
+			> a, > a:active, > a:visited {
-				border: 1px solid rgba(0,0,0,0.1);
+				border: 1px solid rgb(221,221,221);
 				background-color: rgba(255,255,255,0.5);
 				opacity: 1;
 			}
 		}
 		&.error {
-			> a, > a:visited {
+			> a, > a:active, > a:visited {
 				color: #999;
+				&:hover, &.hover {
+					color: #e80;
+				}
 			}
 			.hint {
 				color: #c55;

src/h5ai/css/main.less

@@ -14,6 +14,7 @@ html.no-js {
 	}
 }
 
+
 body {
 	font-family: Ubuntu, sans-serif;
 	font-size: 16px;
@@ -22,16 +23,6 @@ body {
 }
 
 
-a, a:visited {
-	color: #555;
-	text-decoration: none;
-
-	&:hover {
-		color: #e80;
-	}
-}
-
-
 body > nav {
 	position: fixed;
 	z-index: 1;
@@ -49,12 +40,35 @@ body > nav {
 		padding: 0 10px;
 		color: #999;
 	}
-	li {
+	a, a:active, a:visited {
+		color: #555;
 		cursor: pointer;
+		text-decoration: none;
 		opacity: 0.7;
 		.transition( all 0.2s ease-in-out );
 		
-		&.crumb {
+		display: block;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 10px;
+
+		&:hover, &.hover {
+			color: #e80;
+			background-color: rgba(255,255,255,0.5);
+			opacity: 1.0;
+		}
+	}
+	.current a {
+		background-color: rgba(255,255,255,0.5);
+		opacity: 1.0;
+	}
+	img {
+		width: 16px;
+		height: 16px;
+		vertical-align: bottom;
+		padding: 0 6px 6px 0;
+	}
+	.crumb {
 		float: left;
 		border-right: 1px solid rgb(231,231,231);
 		.hint {
@@ -69,37 +83,15 @@ body > nav {
 			padding: 0px;
 		}
 	}
-		&.current {
+	.view {
-			background-color: rgba(255,255,255,0.5);
-			opacity: 1.0;
-		}
-		&.view {
 		float: right;
-			border-left: 1px solid rgb(230,230,230);
+		border-left: 1px solid rgb(231,231,231);
-		}
-		&:hover, &:hover a {
-			background-color: rgba(255,255,255,0.5);
-			color: #e80;
-			opacity: 1.0;
-		}
-	}
-	a {
-		display: block;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-	}
-	img {
-		width: 16px;
-		height: 16px;
-		vertical-align: bottom;
-		padding: 0 6px 6px 0;
 	}
 }
 
 
 #content {
-	max-width: 980px;
+	max-width: 960px;
 	margin: 0 auto;
 
 	> header {
@@ -136,8 +128,9 @@ body > footer {
 	font-size: 0.85em;
 	text-align: center;
 
-	a, a:visited {
+	a, a:active, a:visited {
 		color: #555;
+		text-decoration: none;
 		.transition( all 0.2s ease-in-out );
 
 		&:hover {
@@ -151,15 +144,14 @@ body > footer {
 	position: absolute;
 	left: 6px;
 	bottom: 6px;
-	float: left;
+	opacity: 0.4;
+	.transition( all 0.2s ease-in-out );
 
 	img {
 		width: 20px;
 		height: 20px;
-		opacity: 0.4;
-		.transition( all 0.2s ease-in-out );
 	}
-	&:hover img {
+	&:hover {
 		opacity: 0.8;
 	}
 }

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</a>
+		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai %BUILD_VERSION%">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/header.html

@@ -13,12 +13,9 @@
 	<script src="/h5ai/js/lib/modernizr.min.js"></script>
 </head>
 <body>
-	<nav>
+	<nav class="clearfix">
 		<span class="jsDisabledFallback">Directory index · JavaScript is disabled</span>
 		<ul>
-			<li id="domain" class="crumb">
-				<a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a>
-			</li>
 			<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>
@@ -26,7 +23,6 @@
 				<a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-viewDetails">details</span></a>
 			</li>
 		</ul>
-		<div class="clearfix"></div>
 	</nav>
 	<section id="content">
 		<header></header>

src/h5ai/js/inc/h5ai.js

@@ -1,8 +1,5 @@
 
-var H5ai = function ( options, langs ) {
+var H5ai = function ( options, langs, pathCache ) {
-
-	var THIS = this;
-
 
 
 	/*******************************
@@ -14,16 +11,10 @@ var H5ai = function ( options, langs ) {
 		store: {
 			viewmode: "h5ai.viewmode"
 		},
-		icons: {
-			crumb: "/h5ai/images/crumb.png",
-			ascending: "/h5ai/images/ascending.png",
-			descending: "/h5ai/images/descending.png"
-		},
 		customHeader: "h5ai.header.html",
 		customFooter: "h5ai.footer.html",
 		callbacks: {
-			folderClick: [],
+			pathClick: []
-			fileClick: []			
 		},
 
 		viewmodes: [ "details", "icons" ],
@@ -32,7 +23,8 @@ var H5ai = function ( options, langs ) {
 		},
 		lang: undefined,
 		useBrowserLang: true,
-		setParentFolderLabels: true
+		setParentFolderLabels: true,
+		linkHoverStates: true
 	};
 	this.config = $.extend( {}, defaults, options );
 
@@ -42,19 +34,10 @@ var H5ai = function ( options, langs ) {
 	 * public api
 	 *******************************/
 
-	this.folderClick = function ( fn ) {
+	this.pathClick = function ( fn ) {
 
-		if ( typeof fn === "function" ) {
+		if ( $.isFunction( fn ) ) {
-			this.config.callbacks.folderClick.push( fn );
+			this.config.callbacks.pathClick.push( fn );
-		};
-		return this;
-	};
-
-
-	this.fileClick = function ( fn ) {
-
-		if ( typeof fn === "function" ) {
-			this.config.callbacks.fileClick.push( fn );
 		};
 		return this;
 	};
@@ -83,18 +66,10 @@ var H5ai = function ( options, langs ) {
 	 * callback triggers
 	 *******************************/
 
-	this.triggerFolderClick = function ( label ) {
+	this.triggerPathClick = function ( path, context ) {
 
-		for ( idx in this.config.callbacks.folderClick ) {
+		for ( idx in this.config.callbacks.pathClick ) {
-			this.config.callbacks.folderClick[idx].call( window, label );
+			this.config.callbacks.pathClick[idx].call( window, path, context );
-		};
-	};
-
-
-	this.triggerFileClick = function ( label ) {
-
-		for ( idx in this.config.callbacks.fileClick ) {
-			this.config.callbacks.fileClick[idx].call( window, label );
 		};
 	};
 
@@ -151,12 +126,13 @@ var H5ai = function ( options, langs ) {
 
 	this.initBreadcrumb = function () {
 
-		var $domain = $( "#domain" );
+		var $ul = $( "body > nav ul" );
-		var $ul = $domain.closest( "ul" );
 
-		$domain.find( "span" ).text( document.domain );
-		var pathnameParts = decodeURI( document.location.pathname ).split( "/" );
 		var pathname = "/";
+		var path = pathCache.getPathForFolder( pathname );
+		$ul.append( path.updateCrumbHtml() );
+
+		var pathnameParts = decodeURI( document.location.pathname ).split( "/" );
 		for ( idx in pathnameParts ) {
 			var part = pathnameParts[idx];
 			if ( part !== "" ) {
@@ -177,10 +153,19 @@ var H5ai = function ( options, langs ) {
 
 		function adjustTopSpace() {
 			
-			var height = $( "body > nav" ).height();
+			var winHeight = $( window ).height();
-			var space = height + 50;
+			var navHeight = $( "body > nav" ).outerHeight();
-			$( "body" ).css( "margin-top", "" + space + "px" );
+			var footerHeight = $( "body > footer" ).outerHeight();
-			$( "#tree" ).css( "top", "" + space + "px" );
+			var contentSpacing = 50;
+			var treeSpacing = 50;
+
+			$( "body" )
+				.css( "margin-top", "" + ( navHeight + contentSpacing ) + "px" )
+				.css( "margin-bottom", "" + ( footerHeight + contentSpacing ) + "px" );
+			
+			$( "#tree" )
+				.css( "top", "" + ( navHeight + treeSpacing ) + "px" )
+				.css( "max-height", "" + ( winHeight - navHeight - footerHeight - 36 - 2 * treeSpacing ) + "px" );
 		};
 
 		$( window ).resize( function () {
@@ -228,9 +213,9 @@ var H5ai = function ( options, langs ) {
 		};
 		var $icon;
 		if ( order.indexOf( "O=A" ) >= 0 ) {
-			$icon = $( "<img src='" + this.config.icons.ascending + "' class='sort' alt='ascending' />" );
+			$icon = $( "<img src='/h5ai/images/ascending.png' class='sort' alt='ascending' />" );
 		} else {
-			$icon = $( "<img src='" + this.config.icons.descending + "' class='sort' alt='descending' />" );
+			$icon = $( "<img src='/h5ai/images/descending.png' class='sort' alt='descending' />" );
 		};
 		if ( order.indexOf( "C=N" ) >= 0 ) {
 			$li.find( "a.label" ).append( $icon );
@@ -269,13 +254,13 @@ var H5ai = function ( options, langs ) {
 		this.initExtendedView();
 
 		$( "#viewdetails" ).closest( "li" )
-			.click( function () {
+			.click( $.proxy( function () {
-				THIS.applyViewmode( "details" );
+				this.applyViewmode( "details" );
-			} );
+			}, this ) );
 		$( "#viewicons" ).closest( "li" )
-			.click( function () {
+			.click( $.proxy( function () {
-				THIS.applyViewmode( "icons" );
+				this.applyViewmode( "icons" );
-			} );
+			}, this ) );
 	};
 
 

src/h5ai/js/inc/path.js

@@ -1,19 +1,94 @@
 
 
-var PathCache = function ( utils ) {
+var PathCache = function () {
+
+	
+	var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
+
+	this.splitPathname = function ( pathname ) {
+		
+		if ( pathname === "/"  ) {
+			return [ "", "/" ];
+		};
+		var match = pathnameRegEx.exec( pathname );
+		return [ match[1], match[3] ];
+	};
+
 
 	this.cache = {};
 
 
+	this.loadCache = function () {
+
+		var json = localStorage.getItem( "h5ai.cache" );
+		var objs = $.evalJSON( json );
+		var cache = {};
+		for ( idx in objs ) {
+			var obj = objs[idx];
+			var path = this.objectToPath( obj );
+			cache[path.absHref] = path;
+		};
+		console.log( "loaded: ", cache );
+		return cache;
+	};
+
+
+	this.storeCache = function () {
+
+		var objs = [];
+		for ( ref in this.cache ) {
+			var path = this.cache[ref];
+			if ( path.isFolder ) {
+				objs.push( this.pathToObject( path ) );
+			};
+		};
+		var json = $.toJSON( objs ); 
+		localStorage.setItem( "h5ai.cache", json );
+	};
+
+
+	this.pathToObject = function ( path ) {
+
+		var object = {
+			r: path.absHref,
+			s: path.status,
+			c: [],
+			o: path.treeOpen
+		};
+
+		if ( path.content !== undefined ) {
+			for ( ref in path.content ) {
+				object.c.push( ref );
+			};
+		};
+
+		return object;
+	};
+
+
+	this.objectToPath = function ( obj ) {
+		
+		var path = this.getPathForFolder( obj.r );
+		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 );
+		};
+		return path;
+	};
+	
+
 	this.getPathForFolder = function ( folder ) {
 
-		return this.getCachedPath( new Path( utils, folder ) );
+		return this.getCachedPath( new Path( this, folder ) );
 	};
 
 
 	this.getPathForTableRow = function ( parentFolder, tableRow ) {
 
-		return this.getCachedPath( new Path( utils, parentFolder, tableRow ) );
+		return this.getCachedPath( new Path( this, parentFolder, tableRow ) );
 	};
 
 
@@ -25,22 +100,21 @@ var PathCache = function ( utils ) {
 
 		var cachedPath = this.cache[path.absHref];
 		if ( cachedPath !== undefined ) {
-			console.log( "cached path:", cachedPath.absHref );
 			return cachedPath;
 		};
 
-		console.log( "new path:", path.absHref );
 		this.cache[path.absHref] = path;
+		this.storeCache();
 		return path;
 	};
 
+	this.cache = this.loadCache();
+
 };
 
 
 
-var Path = function ( utils, folder, tableRow ) {
+var Path = function ( pathCache, folder, tableRow ) {
-
-	var THIS = this;
 
 	if ( ! /\/$/.test( folder ) ) {
 		folder += "/";
@@ -59,7 +133,7 @@ var Path = function ( utils, folder, tableRow ) {
 		this.date = $tds.eq( 2 ).text();
 		this.size = $tds.eq( 3 ).text();
 	} else {
-		var splits = utils.splitPathname( folder );
+		var splits = pathCache.splitPathname( folder );
 
 		this.parentFolder = splits[0];
 		this.label = splits[1];
@@ -81,13 +155,14 @@ var Path = function ( utils, 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 = ( decodeURI( document.location.pathname ) === this.absHref );
+	this.isCurrentFolder = ( this.absHref === decodeURI( document.location.pathname ) );
+	this.isDomain = ( this.absHref === "/" );
 
 	if ( this.isParentFolder && h5ai.config.setParentFolderLabels ) {
-		if ( this.absHref === "/" ) {
+		if ( this.isDomain ) {
 			this.label = decodeURI( document.domain );
 		} else {
-			this.label = utils.splitPathname( utils.splitPathname( this.parentFolder )[0] )[1].slice( 0, -1 );
+			this.label = pathCache.splitPathname( pathCache.splitPathname( this.parentFolder )[0] )[1].slice( 0, -1 );
 		};
 	};
 
@@ -98,19 +173,44 @@ var Path = function ( utils, folder, tableRow ) {
 		$extended: undefined,
 		$tree: undefined
 	};
-
+	this.treeOpen = false;
 
 	this.isEmpty = function() {
 
-		if ( this.content === undefined ) {
+		return this.content === undefined || $.isEmptyObject( this.content );
-			return true;
+	};
+
+
+	this.onClick = function ( context ) {
+
+		pathCache.storeCache();
+		h5ai.triggerPathClick( this, context );
+	};
+
+
+	this.onHoverIn = function () {
+
+		if ( h5ai.config.linkHoverStates ) {
+			for ( ref in this.html ) {
+				$ref = this.html[ref];
+				if ( $ref !== undefined ) {
+					$ref.find( "> a" ).addClass( "hover" );
+				};
+			};
+		};
+	};
+
+
+	this.onHoverOut = function () {
+		
+		if ( h5ai.config.linkHoverStates ) {
+			for ( ref in this.html ) {
+				$ref = this.html[ref];
+				if ( $ref !== undefined ) {
+					$ref.find( "> a" ).removeClass( "hover" );
 				};
-		for ( var prop in this.content ) {
-			if( this.content.hasOwnProperty( prop ) ) {
-				return false;
 			};
 		};
-		return true;
 	};
 
 
@@ -127,9 +227,21 @@ var Path = function ( utils, folder, tableRow ) {
 		var $html = $( "<li class='crumb' />" ).data( "path", this );
 
 		try {
+			$html.addClass( this.isFolder ? "folder" : "file" );
 			var $a = $( "<a href='" + this.absHref + "'><img src='/h5ai/images/crumb.png' alt='>' />" + this.label + "</a>" );
+			$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 );
@@ -137,10 +249,6 @@ var Path = function ( utils, folder, tableRow ) {
 					$( "<span class='hint'>(" + this.status + ")</span>" ).appendTo( $a );
 				};
 			};
-			
-			if ( this.isCurrentFolder ) {
-				$html.addClass( "current" );
-			};
 		} catch( err ) {
 			console.log( "updateCrumbHtml failed",  err );
 			$( "<span class='fail'>failed</span>" ).appendTo( $html );
@@ -160,18 +268,11 @@ var Path = function ( utils, folder, tableRow ) {
 		var $html = $( "<li class='entry' />" ).data( "path", this );
 
 		try {
-			if ( this.isFolder ) {
+			$html.addClass( this.isFolder ? "folder" : "file" );
-				$html.addClass( "folder" )
-					.click( function() {
-						h5ai.triggerFolderClick( THIS );
-					} );
-			} else {
-				$html.addClass( "file" )
-					.click( function() {
-						h5ai.triggerFileClick( THIS );
-					} );
-			};
 			var $a = $( "<a href='" + this.href + "' />" ).appendTo( $html );
+			$a.click( $.proxy( function() { this.onClick( "extended" ); }, this ) );
+			$a.hover( $.proxy( function() { this.onHoverIn( "extended" ); }, this ), $.proxy( function() { this.onHoverOut( "extended" ); }, this ) );
+
 			$( "<span class='icon small'><img src='" + this.icon16 + "' alt='" + this.alt + "' /></span>" ).appendTo( $a );
 			$( "<span class='icon big'><img src='" + this.icon48 + "' alt='" + this.alt + "' /></span>" ).appendTo( $a );
 			var $label = $( "<span class='label'>" + this.label + "</span>" ).appendTo( $a );
@@ -192,7 +293,7 @@ var Path = function ( utils, folder, tableRow ) {
 					$a.find( ".icon.big img" ).attr( "src", "/h5ai/icons/48x48/folder-page.png" );
 				} else {
 					$html.addClass( "error" );
-					$label.append( " " ).append(  $( "<span class='hint'>" + this.status + "</span>" ) );
+					$label.append(  $( "<span class='hint'> " + this.status + " </span>" ) );
 				};
 			};
 		} catch( err ) {
@@ -215,39 +316,50 @@ var Path = function ( utils, folder, tableRow ) {
 		var $blank = $( "<span class='blank' />" ).appendTo( $html );
 
 		try {
+			$html.addClass( this.isFolder ? "folder" : "file" );
 			var $a = $( "<a href='" + this.absHref + "' />" )
 				.appendTo( $html )
 				.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
 				.append( $( "<span class='label'>" + this.label + "</span>" ) );
+			$a.click( $.proxy( function() { this.onClick( "tree" ); }, this ) );
+			$a.hover( $.proxy( function() { this.onHoverIn( "tree" ); }, this ), $.proxy( function() { this.onHoverOut( "tree" ); }, this ) );
 
 			if ( this.isFolder ) {
-
-				$html.addClass( "folder" );
-
 				// indicator
 				if ( this.status === undefined || !this.isEmpty() ) {
 					var $indicator = $( "<span class='indicator'><img src='/h5ai/images/tree.png' /></span>" );
 					if ( this.status === undefined ) {
 						$indicator.addClass( "unknown" );
-					} else {
+					} else if ( this.treeOpen ) {
 						$indicator.addClass( "open" );
 					};
-					$indicator.click( function( event ) {
+					$indicator.click( $.proxy( function( event ) {
 						if ( $indicator.hasClass( "unknown" ) ) { 
-							tree.fetchPath( THIS.absHref, function ( path ) {
+							tree.fetchStatusAndContent( this.absHref, false, $.proxy( function ( status, content ) {
-								$html.replaceWith( path.updateTreeHtml() );
+								this.status = status;
-							} );
+								this.content = content;
+								this.treeOpen = true;
+								this.updateTreeHtml();
+							}, this ) );
 						} else if ( $indicator.hasClass( "open" ) ) {
+							this.treeOpen = false;
 							$indicator.removeClass( "open" );
 							$html.find( "> ul.content" ).slideUp();
 						} else {
+							this.treeOpen = true;
 							$indicator.addClass( "open" );
 							$html.find( "> ul.content" ).slideDown();				
 						};
-					} );
+					}, this ) );
 					$blank.replaceWith( $indicator );
 				};
 
+				// is this the domain?
+				if ( this.isDomain ) {
+					$html.addClass( "domain" );
+					$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-home.png" );
+				};
+
 				// is this the current folder?
 				if ( this.isCurrentFolder ) {
 					$html.addClass( "current" );
@@ -260,6 +372,9 @@ var Path = function ( utils, folder, tableRow ) {
 					for ( idx in this.content ) {
 						$( "<li />" ).append( this.content[idx].updateTreeHtml() ).appendTo( $ul );
 					};
+					if ( this.status === undefined || !this.treeOpen ) {
+						$ul.hide();
+					};
 				};
 
 				// reflect folder status
@@ -272,9 +387,6 @@ var Path = function ( utils, folder, tableRow ) {
 						$a.append( $( "<span class='hint'>" + this.status + "</span>" ) );
 					};
 				};
-
-			} else {
-				$html.addClass( "file" );
 			};
 		} catch( err ) {
 			console.log( "updateTreeHtml failed",  err );

src/h5ai/js/inc/tree.js

@@ -1,5 +1,5 @@
 
-var Tree = function ( utils, h5ai ) {
+var Tree = function ( pathCache, h5ai ) {
 
 	var THIS = this;
 	var contentTypeRegEx = /^text\/html;h5ai=/;
@@ -47,10 +47,12 @@ var Tree = function ( utils, h5ai ) {
 		};
 
 		$tree.hover( function () { shiftTree( true ); }, function () { shiftTree(); } );
-		$( window ).resize( function() { shiftTree(); } );
+		$( window ).resize( function() {
+			shiftTree();
+		} );
 
 		this.fetchTree( decodeURI( document.location.pathname ), function( path ) {
-			$tree.append( path.updateTreeHtml() );
+			$tree.append( path.updateTreeHtml() ).show();
 			shiftTree();
 		} );
 	};
@@ -58,18 +60,21 @@ var Tree = function ( utils, h5ai ) {
 
 	this.fetchTree = function ( pathname, callback, childPath ) {
 
-		this.fetchPath( pathname, function ( path ) {
+		this.fetchPath( pathname, $.proxy( function ( path ) {
+			
+			path.treeOpen = true;
+			
 			if ( childPath !== undefined ) {
 				path.content[ childPath.absHref ] = childPath;
 			};
 
-			var parent = utils.splitPathname( pathname )[0];
+			var parent = pathCache.splitPathname( pathname )[0];
 			if ( parent === "" ) {
 				callback( path );
 			} else {
-				THIS.fetchTree( parent, callback, path );				
+				this.fetchTree( parent, callback, path );				
 			};
-		} );
+		}, this ) );
 	};
 
 

src/h5ai/js/inc/utils.js

@@ -1,15 +0,0 @@
-
-var Utils = function () {
-
-	var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
-
-	this.splitPathname = function ( pathname ) {
-		
-		if ( pathname === "/"  ) {
-			return [ "", "/" ];
-		};
-		var match = pathnameRegEx.exec( pathname );
-		return [ match[1], match[3] ];
-	};
-
-};

src/h5ai/js/main.js

@@ -1,8 +1,8 @@
 ( function( $ ) {
 
-	// @include "inc/utils.js"
+	// @include "inc/jquery.json.min.js"
-	// @include "inc/h5ai.js"
 	// @include "inc/path.js"
+	// @include "inc/h5ai.js"
 	// @include "inc/tree.js"
 
 
@@ -10,10 +10,9 @@
 	 * create
 	 *******************************/
 
-	var utils = new Utils();
+	var pathCache = new PathCache();
-	var pathCache = new PathCache( utils );
+	var h5ai = new H5ai( h5aiOptions, h5aiLangs, pathCache );
-	var h5ai = new H5ai( h5aiOptions, h5aiLangs );
+	var tree = new Tree( pathCache, h5ai );
-	var tree = new Tree( utils, h5ai );
 
 
 	/*******************************
@@ -21,10 +20,17 @@
 	 *******************************/
 
 	$.h5ai = {
-		folderClick: h5ai.folderClick,
+		click: $.proxy( h5ai.pathClick, h5ai )
-		fileClick: h5ai.fileClick
 	};
 
+	$( ".l10n-footerUsing" ).click( function () {
+		console.log( "clean" );
+		pathCache.cache = {};
+		console.log( "store" );
+		pathCache.storeCache();
+		console.log( "load", pathCache.loadCache() );
+	} );
+
 	
 	/*******************************
 	 * init after dom load

src/h5ai/options.js

@@ -56,7 +56,12 @@ h5aiOptions = {
 	/*
 	 * Set parent folder labels to real folder names.
 	 */
-	setParentFolderLabels: true
+	setParentFolderLabels: true,
+	
+	/*
+	 * Link the hover effects between crumb, extended view and tree.
+	 */
+	linkHoverStates: true
 };
 
 
@@ -86,6 +91,36 @@ h5aiLangs = {
 		columnSize: "Größe",
 		footerUsing: "nutzt",
 		parentDirectory: "Übergeordnetes Verzeichnis"
+	},
+	
+	"fr": {
+		viewDetails: "détails",
+		viewIcons: "icônes",
+		columnName: "Nom",
+		columnLastModified: "Dernière modification",
+		columnSize: "Taille",
+		footerUsing: "utilise",
+		parentDirectory: "Dossier parent"
+	},
+
+	"nl": {
+		viewDetails: "details",
+		viewIcons: "iconen",
+		columnName: "Naam",
+		columnLastModified: "Laatste wijziging",
+		columnSize: "Grootte",
+		footerUsing: "gebruikt",
+		parentDirectory: "Bovenliggende map"
+	},
+
+	"sv": {
+		viewDetails: "detaljerad",
+		viewIcons: "ikoner",
+		columnName: "Filnamn",
+		columnLastModified: "Senast ändrad",
+		columnSize: "Filstorlek",
+		footerUsing: "använder",
+		parentDirectory: "Till överordnad mapp"
 	}
 
 };

target/dot.htaccess

@@ -1,5 +1,5 @@
 ################################
-# h5ai 0.8
+# h5ai 0.9
 # customized .htaccess
 ################################
 
@@ -56,7 +56,7 @@
 
 	IndexOrderDefault    Ascending Name
 
-	IndexOptions         Type=text/html;h5ai=0.8
+	IndexOptions         Type=text/html;h5ai=0.9
 	IndexOptions         Charset=UTF-8
 	IndexOptions         FancyIndexing
 	IndexOptions         HTMLTable

target/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 0.8">h5ai</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>

target/h5ai/header.html

@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>Directory index · styled with h5ai</title>
-	<meta name="h5ai-version" content="h5ai 0.8">
+	<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">
@@ -13,12 +13,9 @@
 	<script src="/h5ai/js/lib/modernizr.min.js"></script>
 </head>
 <body>
-	<nav>
+	<nav class="clearfix">
 		<span class="jsDisabledFallback">Directory index · JavaScript is disabled</span>
 		<ul>
-			<li id="domain" class="crumb">
-				<a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a>
-			</li>
 			<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>
@@ -26,7 +23,6 @@
 				<a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-viewDetails">details</span></a>
 			</li>
 		</ul>
-		<div class="clearfix"></div>
 	</nav>
 	<section id="content">
 		<header></header>

target/h5ai/options.js

@@ -1,5 +1,5 @@
 /*
- * h5ai 0.8
+ * h5ai 0.9
  * Options and localization 
  */
 
@@ -56,7 +56,12 @@ h5aiOptions = {
 	/*
 	 * Set parent folder labels to real folder names.
 	 */
-	setParentFolderLabels: true
+	setParentFolderLabels: true,
+	
+	/*
+	 * Link the hover effects between crumb, extended view and tree.
+	 */
+	linkHoverStates: true
 };
 
 
@@ -86,6 +91,16 @@ h5aiLangs = {
 		columnSize: "Größe",
 		footerUsing: "nutzt",
 		parentDirectory: "Übergeordnetes Verzeichnis"
+	},
+	
+	"fr": {
+		viewDetails: "détails",
+		viewIcons: "icônes",
+		columnName: "Nom",
+		columnLastModified: "Dernière modification",
+		columnSize: "Taille",
+		footerUsing: "utilise",
+		parentDirectory: "Dossier parent"
 	}
 
 };