Added thumbs and slide option.

README.md

@@ -10,6 +10,12 @@ It uses the [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-1733
 ## Changelog
 
 
+### v0.14 · *2011-08-16*
+
+* added image thumbnails for PHP version
+* new option `slideTree` to turn off auto slide in
+
+
 ### v0.13.2 · *2011-08-12*
 
 * changes in `/h5ai/.htaccess` ... PHP configuration ...

build.properties

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

src/h5ai/.htaccess

@@ -28,5 +28,8 @@ AddType  text/html  .php
 	<FilesMatch "\.js$">
 		Header set Cache-Control "max-age=31449600, public"
 	</FilesMatch>
+	<FilesMatch "thumb-.*\.jpg$">
+		Header set Cache-Control "max-age=31449600, public"
+	</FilesMatch>
 </IfModule>
 

src/h5ai/css/inc/extended.less

@@ -116,6 +116,18 @@
 				width: 80px;
 				white-space: nowrap;
 			}
+			&.entry.thumb .icon.small {
+				overflow: hidden;
+				padding: 5px;
+
+				img {
+					background-color: #eee;
+					width: 16px;
+					height: 16px;
+					border: 1px solid #ddd;
+					overflow: hidden;
+				}
+			}
 		}
 	}
 	.empty {
@@ -170,8 +182,8 @@
 						display: block;
 
 						img {
-							width: 48px;
-							height: 48px;
+							min-width: 48px;
+							min-height: 48px;
 							margin-bottom: 8px;
 						}
 					}
@@ -206,6 +218,21 @@
 					}
 				}
 			}
+			&.entry.thumb .icon.big {
+				width: 100px;
+				height: 58px;
+				overflow: hidden;
+
+				img {
+					background-color: #eee;
+					min-width: 46px;
+					min-height: 46px;
+					min-width: 12px;
+					min-height: 12px;
+					border: 1px solid #ddd;
+					overflow: hidden;
+				}
+			}
 		}
 	}
 	.empty {

src/h5ai/js/inc/h5ai.js

@@ -21,6 +21,7 @@ var H5ai = function ( options, langs ) {
 			ascending: true
 		},
 		showTree: true,
+		slideTree: true,
 		folderStatus: {
 		},
 		lang: null,
@@ -182,7 +183,7 @@ var H5ai = function ( options, langs ) {
 		var $tree = $( "#tree" );
 		var $extended = $( "#extended" );
 
-		if ( $tree.outerWidth() < $extended.offset().left || forceVisible === true ) {
+		if ( this.config.slideTree && $tree.outerWidth() < $extended.offset().left || forceVisible === true ) {
 			if ( dontAnimate === true ) {
 				$tree.stop().css( { left: 0 } );															
 			} else {

src/h5ai/options.js

@@ -35,6 +35,11 @@ h5aiOptions = {
 	 */
 	"showTree": true,
 
+	/*
+	 * Slide tree bar into viewport if there is enough space, boolean.
+	 */
+	"slideTree": true,
+
 	/*
 	 * Associative array of folders and their HTTP status codes to
 	 * avoid HEAD requests to that folders. The key (folder) must start
@@ -91,7 +96,13 @@ h5aiOptions = {
 	 * http://www.php.net/manual/en/function.preg-match.php
 	 */
 	"ignore": [ "h5ai", "h5ai.header.html", "h5ai.footer.html" ],
-	"ignoreRE": [ "/^\\./" ]
+	"ignoreRE": [ "/^\\./" ],
+
+	/*
+	 * Only used in PHP implementation.
+	 * Show thumbnails in Icons view.
+	 */
+	"showThumbs": true
 };
 
 

src/h5ai/php/extended.php

@@ -1,7 +1,10 @@
 <?php
 
+require_once "thumbnail.php";
+
+
 class Entry {
-	private $h5ai, $label, $absPath, $absHref, $date, $isFolder, $type, $size;
+	private $h5ai, $label, $absPath, $absHref, $date, $isFolder, $type, $size, $thumbTypes;
 
 	public function __construct( $h5ai, $absPath, $absHref, $type = null, $label = null ) {
 
@@ -20,6 +23,8 @@ public function __construct( $h5ai, $absPath, $absHref, $type = null, $label = n
 			$this->type = $type !== null ? $type : $this->h5ai->getType( $this->absPath );
 			$this->size = filesize( $this->absPath );
 		}
+
+		$this->thumbTypes = array( "bmp", "gif", "ico", "image", "jpg", "png", "tiff" );
 	}
 
 	public function isFolder() {
@@ -54,6 +59,8 @@ public function toHtml( $dateFormat ) {
 
 		$classes = "entry " . $this->type;
 		$img = $this->type;
+		$smallImg = "/h5ai/icons/16x16/" . $this->type . ".png";
+		$bigImg = "/h5ai/icons/48x48/" . $this->type . ".png";
 		$hint = "";
 		$dateLabel = date( $dateFormat, $this->date );
 
@@ -63,17 +70,28 @@ public function toHtml( $dateFormat ) {
 			if ( $code !== "h5ai" ) {
 				if ( $code === 200 ) {
 					$img = "folder-page";
+					$smallImg = "/h5ai/icons/16x16/folder-page.png";
+					$bigImg = "/h5ai/icons/48x48/folder-page.png";
 				} else {
 					$classes .= " error";
 					$hint = "<span class='hint'> " . $code . " </span>";
 				}
 			}
 		}
+		if ( $this->h5ai->showThumbs() && in_array( $this->type, $this->thumbTypes ) ) {
+			$classes .= " thumb";
+			$thumbnail = new Thumbnail( $this->absPath, "square", 16, 16 );
+			$thumbnail->create();
+			$smallImg = file_exists( $thumbnail->getPath() ) ? $thumbnail->getHref() : $thumbnail->getLiveHref();
+			$thumbnail = new Thumbnail( $this->absPath, "rational", 96, 46 );
+			$thumbnail->create();
+			$bigImg = file_exists( $thumbnail->getPath() ) ? $thumbnail->getHref() : $thumbnail->getLiveHref();
+		}
 
 		$html = "\t<li class='" . $classes . "'>\n";
 		$html .= "\t\t<a href='" . $this->absHref . "'>\n";
-		$html .= "\t\t\t<span class='icon small'><img src='/h5ai/icons/16x16/" . $img . ".png' alt='" . $img . "' /></span>\n";
-		$html .= "\t\t\t<span class='icon big'><img src='/h5ai/icons/48x48/" . $img . ".png' alt='" . $img . "' /></span>\n";
+		$html .= "\t\t\t<span class='icon small'><img src='" . $smallImg . "' alt='" . $img . "' /></span>\n";
+		$html .= "\t\t\t<span class='icon big'><img src='" . $bigImg . "' alt='" . $img . "' /></span>\n";
 		$html .= "\t\t\t<span class='label'>" . $this->label . $hint . "</span>\n";
 		$html .= "\t\t\t<span class='date'>" . $dateLabel . "</span>\n";
 		$html .= "\t\t\t<span class='size'>" . $this->formatSize( $this->size ) . "</span>\n";

src/h5ai/php/h5ai.php

@@ -83,7 +83,7 @@ public function getView() {
 
 	public function getOptions() {
 
-		return $this->options["options"]  ;
+		return $this->options["options"];
 	}
 
 	public function getLangs() {
@@ -117,6 +117,11 @@ public function getDateFormat() {
 		return $this->dateFormat;
 	}
 
+	public function showThumbs() {
+
+		return $this->options["options"]["showThumbs"] === true;
+	}
+
 	public function getTitle() {
 
 		$title = $this->domain . rawurldecode( $this->absHref );
@@ -187,12 +192,12 @@ public function normalizePath( $path, $endWithSlash ) {
 
 	public function startsWith( $sequence, $start ) {
 
-		return substr( $sequence, 0, strlen( $start ) ) === $start;
+		return strcasecmp( substr( $sequence, 0, strlen( $start ) ), $start ) === 0;
 	}
 
 	public function endsWith( $sequence, $end ) {
 
-		return substr( $sequence, -strlen( $end ) ) === $end;
+		return strcasecmp( substr( $sequence, -strlen( $end ) ), $end ) === 0;
 	}
 
 	public function getHttpCode( $absHref ) {