* 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)

README.md

@@ -1,36 +1,9 @@
-# h5ai v0.9   ·   a beautified Apache index
+# h5ai v0.10   ·   a beautified Apache index
 
-
-## 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.
+h5ai aims to make browsing files on a Apache HTTP server more comfortable.  
+See the [live demo](http://larsjung.de/h5ai/sample).  
+For installation instructions and documentation have a look at
+[project page](http://larsjung.de/h5ai).
 
 
 ## License and References
@@ -47,6 +20,16 @@ please respect their rights.
 
 ## Changelog
 
+### 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.10
 
 
 # src

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,7 +1,6 @@
 
 #tree {
 	position: fixed;
-	left: -200px;
 	display: none;
 	left: 0;
 	top: 0;
@@ -12,6 +11,21 @@
 	border: 2px solid rgb(210,210,210);
 	border-left: none;
 	.border-radius ( 0 15px 15px 0 );
+
+	> .scrollbar {
+		margin: 12px;
+		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

@@ -50,7 +50,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();
@@ -132,7 +132,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 +165,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 () {
@@ -227,15 +230,16 @@ var H5ai = function ( options, langs, pathCache ) {
 
 		// 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() );
 		} );
+		$( "#table" ).remove();
 
 		$( "#extended" ).append( $ul );
 
 		// 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
@@ -303,12 +307,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

@@ -28,7 +28,6 @@ var PathCache = function () {
 			var path = this.objectToPath( obj );
 			cache[path.absHref] = path;
 		};
-		console.log( "loaded: ", cache );
 		return cache;
 	};
 
@@ -129,21 +128,21 @@ 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"); //decodeURI( $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 ) + "/";
 		};
 	};
 
@@ -155,14 +154,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 ) );
 		};
 	};
 
@@ -250,7 +249,6 @@ var Path = function ( pathCache, folder, tableRow ) {
 				};
 			};
 		} catch( err ) {
-			console.log( "updateCrumbHtml failed",  err );
 			$( "<span class='fail'>failed</span>" ).appendTo( $html );
 		};
 
@@ -269,7 +267,7 @@ var Path = function ( pathCache, folder, tableRow ) {
 
 		try {
 			$html.addClass( this.isFolder ? "folder" : "file" );
-			var $a = $( "<a href='" + this.href + "' />" ).appendTo( $html );
+			var $a = $( "<a href='" + this.absHref + "' />" ).appendTo( $html );
 			$a.click( $.proxy( function() { this.onClick( "extended" ); }, this ) );
 			$a.hover( $.proxy( function() { this.onHoverIn( "extended" ); }, this ), $.proxy( function() { this.onHoverOut( "extended" ); }, this ) );
 
@@ -297,7 +295,6 @@ var Path = function ( pathCache, folder, tableRow ) {
 				};
 			};
 		} catch( err ) {
-			console.log( "updateExtendedHtml failed",  err );
 			$( "<span class='fail'>failed</span>" ).appendTo( $html );
 		};
 
@@ -339,16 +336,22 @@ var Path = function ( pathCache, folder, tableRow ) {
 								this.status = status;
 								this.content = content;
 								this.treeOpen = true;
-								this.updateTreeHtml();
+								this.updateTreeHtml( function() {
+									$( "#tree" ).get( 0 ).updateScrollbar();
+								} );
 							}, this ) );
 						} else if ( $indicator.hasClass( "open" ) ) {
 							this.treeOpen = false;
 							$indicator.removeClass( "open" );
-							$html.find( "> ul.content" ).slideUp();
+							$html.find( "> ul.content" ).slideUp( function() {
+								$( "#tree" ).get( 0 ).updateScrollbar();
+							} );
 						} else {
 							this.treeOpen = true;
 							$indicator.addClass( "open" );
-							$html.find( "> ul.content" ).slideDown();				
+							$html.find( "> ul.content" ).slideDown( function() {
+								$( "#tree" ).get( 0 ).updateScrollbar();
+							} );				
 						};
 					}, this ) );
 					$blank.replaceWith( $indicator );
@@ -389,7 +392,6 @@ var Path = function ( pathCache, folder, tableRow ) {
 				};
 			};
 		} catch( err ) {
-			console.log( "updateTreeHtml failed",  err );
 			$( "<span class='fail'>failed</span>" ).appendTo( $html );
 		};