From 6a45ae38fa03d65d06bebfc116914e9e0d651894 Mon Sep 17 00:00:00 2001
From: Marco Dickert <marco@misterunknown.de>
Date: Sat, 5 Aug 2017 02:19:12 +0200
Subject: [PATCH] fix problem with image preview when the path contains special
 characters

---
 build/libifm.php | 21 ++++++++++-----------
 ifm.php          | 21 ++++++++++-----------
 src/ifm.js       | 21 ++++++++++-----------
 3 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/build/libifm.php b/build/libifm.php
index 342f49c..8eb27bc 100644
--- a/build/libifm.php
+++ b/build/libifm.php
@@ -1149,8 +1149,9 @@ function IFM( params ) {
 					item.download.action = "download";
 					item.download.icon = "icon icon-download";
 				}
-				if( item.icon.indexOf( 'file-image' ) !== -1 && self.config.isDocroot )
-					item.tooltip = 'data-toggle="tooltip" title="<img src=\'' + self.HTMLEncode( self.pathCombine( self.currentDir, item.name ) ) + '\' class=\'imgpreview\'>"';
+				if( item.icon.indexOf( 'file-image' ) !== -1 && self.config.isDocroot ) {
+					item.tooltip = 'data-toggle="tooltip"';
+				}
 				if( self.config.extract && self.inArray( item.ext, ["zip","tar","tgz","tar.gz","tar.xz","tar.bz2"] ) ) {
 					item.eaction = "extract";
 					item.button.push({
@@ -1246,6 +1247,13 @@ function IFM( params ) {
 		});
 		// has to be jquery, since this is a bootstrap feature
 		$( 'a[data-toggle="tooltip"]' ).tooltip({
+			title: function() {
+				var item = self.fileCache.find( x => x.guid == $(this).attr('id') );
+				var tooltip = document.createElement( 'img' );
+				tooltip.src = encodeURI( self.pathCombine( self.currentDir, item.name ) ).replace( '#', '%23' ).replace( '?', '%3F' );
+				tooltip.classList.add( 'imgpreview' );
+				return tooltip;
+			},
 			animated: 'fade',
 			placement: 'right',
 			html: true
@@ -2261,15 +2269,6 @@ function IFM( params ) {
 		}
 	};
 
-	/**
-	 * Encodes a string to use in HTML attributes
-	 *
-	 * @param string s - decoded string
-	 */
-	this.HTMLEncode = function( s ) {
-		return s.replace( /'/g, '&#39;').replace( /"/g, '&#43;');
-	};
-
 	/**
 	 * Encodes a string for use in the href attribute of an anchor.
 	 *
diff --git a/ifm.php b/ifm.php
index 54c78f1..39b6b17 100644
--- a/ifm.php
+++ b/ifm.php
@@ -1149,8 +1149,9 @@ function IFM( params ) {
 					item.download.action = "download";
 					item.download.icon = "icon icon-download";
 				}
-				if( item.icon.indexOf( 'file-image' ) !== -1 && self.config.isDocroot )
-					item.tooltip = 'data-toggle="tooltip" title="<img src=\'' + self.HTMLEncode( self.pathCombine( self.currentDir, item.name ) ) + '\' class=\'imgpreview\'>"';
+				if( item.icon.indexOf( 'file-image' ) !== -1 && self.config.isDocroot ) {
+					item.tooltip = 'data-toggle="tooltip"';
+				}
 				if( self.config.extract && self.inArray( item.ext, ["zip","tar","tgz","tar.gz","tar.xz","tar.bz2"] ) ) {
 					item.eaction = "extract";
 					item.button.push({
@@ -1246,6 +1247,13 @@ function IFM( params ) {
 		});
 		// has to be jquery, since this is a bootstrap feature
 		$( 'a[data-toggle="tooltip"]' ).tooltip({
+			title: function() {
+				var item = self.fileCache.find( x => x.guid == $(this).attr('id') );
+				var tooltip = document.createElement( 'img' );
+				tooltip.src = encodeURI( self.pathCombine( self.currentDir, item.name ) ).replace( '#', '%23' ).replace( '?', '%3F' );
+				tooltip.classList.add( 'imgpreview' );
+				return tooltip;
+			},
 			animated: 'fade',
 			placement: 'right',
 			html: true
@@ -2261,15 +2269,6 @@ function IFM( params ) {
 		}
 	};
 
-	/**
-	 * Encodes a string to use in HTML attributes
-	 *
-	 * @param string s - decoded string
-	 */
-	this.HTMLEncode = function( s ) {
-		return s.replace( /'/g, '&#39;').replace( /"/g, '&#43;');
-	};
-
 	/**
 	 * Encodes a string for use in the href attribute of an anchor.
 	 *
diff --git a/src/ifm.js b/src/ifm.js
index 7cd3187..f24fb58 100644
--- a/src/ifm.js
+++ b/src/ifm.js
@@ -118,8 +118,9 @@ function IFM( params ) {
 					item.download.action = "download";
 					item.download.icon = "icon icon-download";
 				}
-				if( item.icon.indexOf( 'file-image' ) !== -1 && self.config.isDocroot )
-					item.tooltip = 'data-toggle="tooltip" title="<img src=\'' + self.HTMLEncode( self.pathCombine( self.currentDir, item.name ) ) + '\' class=\'imgpreview\'>"';
+				if( item.icon.indexOf( 'file-image' ) !== -1 && self.config.isDocroot ) {
+					item.tooltip = 'data-toggle="tooltip"';
+				}
 				if( self.config.extract && self.inArray( item.ext, ["zip","tar","tgz","tar.gz","tar.xz","tar.bz2"] ) ) {
 					item.eaction = "extract";
 					item.button.push({
@@ -215,6 +216,13 @@ function IFM( params ) {
 		});
 		// has to be jquery, since this is a bootstrap feature
 		$( 'a[data-toggle="tooltip"]' ).tooltip({
+			title: function() {
+				var item = self.fileCache.find( x => x.guid == $(this).attr('id') );
+				var tooltip = document.createElement( 'img' );
+				tooltip.src = encodeURI( self.pathCombine( self.currentDir, item.name ) ).replace( '#', '%23' ).replace( '?', '%3F' );
+				tooltip.classList.add( 'imgpreview' );
+				return tooltip;
+			},
 			animated: 'fade',
 			placement: 'right',
 			html: true
@@ -1230,15 +1238,6 @@ function IFM( params ) {
 		}
 	};
 
-	/**
-	 * Encodes a string to use in HTML attributes
-	 *
-	 * @param string s - decoded string
-	 */
-	this.HTMLEncode = function( s ) {
-		return s.replace( /'/g, '&#39;').replace( /"/g, '&#43;');
-	};
-
 	/**
 	 * Encodes a string for use in the href attribute of an anchor.
 	 *