From 31d30b87290628124e4ed24dbdb7a05381c1a980 Mon Sep 17 00:00:00 2001
From: Marco Dickert <marco@misterunknown.de>
Date: Thu, 16 Feb 2017 15:40:24 +0100
Subject: [PATCH] added image preview

---
 ifm.php       | 11 ++++++++++-
 src/ifm.js    |  9 ++++++++-
 src/style.css |  2 ++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/ifm.php b/ifm.php
index c92eac3..b402ec9 100644
--- a/ifm.php
+++ b/ifm.php
@@ -282,6 +282,8 @@ class IFM {
 
 a { cursor: pointer !important; }
 
+img.imgpreview { max-width: 100%; }
+
 div#content { width: 100%; height: 350px; }
 
 input[name=newperms] { width: 7em; }
@@ -489,7 +491,9 @@ function IFM() {
 				multisel += '>';
 			}
 			if(data[i].type=="file") {
-				newrow += '<td>'+multisel+'<a href="'+ifm.pathCombine(ifm.currentDir,data[i].name)+'"><span class="'+data[i].icon+'"></span> '+data[i].name+'</a></td>';
+				newrow += '<td>'+multisel+'<a href="'+self.pathCombine(ifm.currentDir,data[i].name)+'" ';
+				if( data[i].icon.indexOf( 'file-image' ) !== -1 ) newrow += 'data-toggle="tooltip" title="<img src=\''+self.pathCombine(self.currentDir,data[i].name)+'\' class=\'imgpreview\'>"';
+				newrow += '><span class="'+data[i].icon+'"></span> '+data[i].name+'</a></td>';
 			} else {
 				newrow += '<td>'+multisel+'<a onclick="ifm.changeDirectory(\''+data[i].name+'\')"><span class="'+data[i].icon+'"></span> ';
 				if( data[i].name == ".." ) newrow += "[ up ]";
@@ -559,6 +563,11 @@ function IFM() {
 			$("input[name=multisel]").on("change", function(){ ifm.handleMultiSelect(); });
 		}
 		// todo: bootstrap-fancybox for images
+		$('a[data-toggle="tooltip"]').tooltip({
+			animated: 'fade',
+			placement: 'right',
+			html: true
+		});
 	};
 
 	this.changeDirectory = function( newdir, options={ absolute: false, pushState: true } ) {
diff --git a/src/ifm.js b/src/ifm.js
index 708be90..6e72d8d 100644
--- a/src/ifm.js
+++ b/src/ifm.js
@@ -64,7 +64,9 @@ function IFM() {
 				multisel += '>';
 			}
 			if(data[i].type=="file") {
-				newrow += '<td>'+multisel+'<a href="'+ifm.pathCombine(ifm.currentDir,data[i].name)+'"><span class="'+data[i].icon+'"></span> '+data[i].name+'</a></td>';
+				newrow += '<td>'+multisel+'<a href="'+self.pathCombine(ifm.currentDir,data[i].name)+'" ';
+				if( data[i].icon.indexOf( 'file-image' ) !== -1 ) newrow += 'data-toggle="tooltip" title="<img src=\''+self.pathCombine(self.currentDir,data[i].name)+'\' class=\'imgpreview\'>"';
+				newrow += '><span class="'+data[i].icon+'"></span> '+data[i].name+'</a></td>';
 			} else {
 				newrow += '<td>'+multisel+'<a onclick="ifm.changeDirectory(\''+data[i].name+'\')"><span class="'+data[i].icon+'"></span> ';
 				if( data[i].name == ".." ) newrow += "[ up ]";
@@ -134,6 +136,11 @@ function IFM() {
 			$("input[name=multisel]").on("change", function(){ ifm.handleMultiSelect(); });
 		}
 		// todo: bootstrap-fancybox for images
+		$('a[data-toggle="tooltip"]').tooltip({
+			animated: 'fade',
+			placement: 'right',
+			html: true
+		});
 	};
 
 	this.changeDirectory = function( newdir, options={ absolute: false, pushState: true } ) {
diff --git a/src/style.css b/src/style.css
index 2973766..5f70ffd 100644
--- a/src/style.css
+++ b/src/style.css
@@ -18,6 +18,8 @@ body {
 
 a { cursor: pointer !important; }
 
+img.imgpreview { max-width: 100%; }
+
 div#content { width: 100%; height: 350px; }
 
 input[name=newperms] { width: 7em; }