Improved tree scrollbar.

README.md

@@ -1,4 +1,4 @@
-# h5ai v0.10   ·   a beautified Apache index
+# h5ai v0.10.2   ·   a beautified Apache index
 
 h5ai aims to make browsing files on a Apache HTTP server more comfortable.  
 See the [live demo](http://larsjung.de/h5ai/sample).  
@@ -20,6 +20,18 @@ please respect their rights.
 
 ## Changelog
 
+### 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*
 

build.properties

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

src/h5ai/css/inc/tree.less

@@ -6,14 +6,14 @@
 	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;
+		margin: 12px 12px 12px 0;
 		width: 6px;
 		background-color: rgb(210,210,210);
 		.border-radius( 3px );

src/h5ai/js/inc/path.js

@@ -227,20 +227,21 @@ var Path = function ( pathCache, folder, tableRow ) {
 
 		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 );
@@ -267,7 +268,8 @@ var Path = function ( pathCache, folder, tableRow ) {
 
 		try {
 			$html.addClass( this.isFolder ? "folder" : "file" );
-			var $a = $( "<a href='" + this.absHref + "' />" ).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 ) );
 
@@ -314,10 +316,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 ) );
 
@@ -336,6 +339,7 @@ var Path = function ( pathCache, folder, tableRow ) {
 								this.status = status;
 								this.content = content;
 								this.treeOpen = true;
+								$( "#tree" ).get( 0 ).updateScrollbar( true );
 								this.updateTreeHtml( function() {
 									$( "#tree" ).get( 0 ).updateScrollbar();
 								} );
@@ -343,12 +347,14 @@ var Path = function ( pathCache, folder, tableRow ) {
 						} else if ( $indicator.hasClass( "open" ) ) {
 							this.treeOpen = false;
 							$indicator.removeClass( "open" );
+							$( "#tree" ).get( 0 ).updateScrollbar( true );
 							$html.find( "> ul.content" ).slideUp( function() {
 								$( "#tree" ).get( 0 ).updateScrollbar();
 							} );
 						} else {
 							this.treeOpen = true;
 							$indicator.addClass( "open" );
+							$( "#tree" ).get( 0 ).updateScrollbar( true );
 							$html.find( "> ul.content" ).slideDown( function() {
 								$( "#tree" ).get( 0 ).updateScrollbar();
 							} );				

src/h5ai/js/inc/tree.js

@@ -179,8 +179,16 @@ var Tree = function ( pathCache, h5ai ) {
 		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 );
+			};
 
-		var update = function () {
 			$wrapper.css( "height", $element.height() );
 			var visibleHeight = $element.height();
 			var contentHeight = $content.outerHeight();
@@ -189,9 +197,8 @@ var Tree = function ( pathCache, h5ai ) {
 			var visVertFrac = Math.min( visibleHeight / contentHeight, 1 );
 			
 			if ( visVertFrac < 1 ) {
-				$wrapper.css( "padding-right", $scrollbar.outerWidth( true ) );
 				$scrollbar
-					.show()
+					.fadeIn( 50 )
 					.css( {
 						height: $element.innerHeight() + $scrollbar.height() - $scrollbar.outerHeight( true )
 					} );
@@ -201,8 +208,7 @@ var Tree = function ( pathCache, h5ai ) {
 						height: $scrollbar.height() * visVertFrac
 					} );
 			} else {
-				$wrapper.css( "padding-right", 0 );
-				$scrollbar.hide()				
+				$scrollbar.fadeOut( 50 );
 			};
 		};
 		var scroll = function ( event ) {
@@ -222,6 +228,7 @@ var Tree = function ( pathCache, h5ai ) {
 		$element.get( 0 ).updateScrollbar = update;
 		$wrapper
 			.css( {
+				"padding-right": $scrollbar.outerWidth( true ),
 				height: $element.height(),
 				overflow: "hidden"
 			} );

target/dot.htaccess

@@ -1,5 +1,5 @@
 ################################
-# h5ai 0.10
+# h5ai 0.10.2
 # customized .htaccess
 ################################
 
@@ -62,7 +62,7 @@
 
 	IndexOrderDefault    Ascending Name
 
-	IndexOptions         Type=text/html;h5ai=0.10
+	IndexOptions         Type=text/html;h5ai=0.10.2
 	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 project page">h5ai 0.10</a>
+		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai 0.10.2</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.10">
+	<meta name="h5ai-version" content="h5ai 0.10.2">
 	<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">

target/h5ai/options.js

@@ -1,5 +1,5 @@
 /*
- * h5ai 0.10
+ * h5ai 0.10.2
  * Options and localization 
  */