[cmd:quicklook] adjust styles and event handlers

css/quicklook.css

@@ -316,7 +316,7 @@
 .elfinder-quicklook-preview > img,
 .elfinder-quicklook-preview > div > canvas {
     display: block;
-    margin: 0 auto;
+    margin: auto;
 }
 
 /* navigation bar on quicklook window bottom */

js/commands/quicklook.js

@@ -563,7 +563,10 @@
 					state = animated;
 					win.hasClass(fullscreen) && fsicon.click();
 					(hash && (node = cwd.find('#'+hash)).length)
-						? win.animate(closedCss(node), 500, function() { close(closed, true); })
+						? win.animate(closedCss(node), 500, function() {
+							preview.off('changesize');
+							close(closed, true);
+						})
 						: close(closed, true);
 				} else {
 					dockedNode = fm.getUI('navdock').data('removeNode')(self.window.attr('id'), 'detach');

js/commands/quicklook.plugins.js

@@ -153,6 +153,11 @@ elFinder.prototype.commands.quicklook.plugins = [
 						loading.remove();
 						fm.debug('error', e);
 					},
+					setdim = function(dim) {
+						var rfile = fm.file(file.hash);
+						rfile.width = dim[0];
+						rfile.height = dim[1];
+					},
 					loading, url, base, wk;
 				if (file.mime === mime) {
 					e.stopImmediatePropagation();
@@ -173,7 +178,7 @@ elFinder.prototype.commands.quicklook.plugins = [
 						wk = fm.getWorker();
 						wk.onmessage = function(res) {
 							var data = res.data,
-								cv, co, id;
+								cv, co, id, prop;
 							wk && wk.terminate();
 							cv = document.createElement('canvas');
 							co = cv.getContext('2d');
@@ -182,8 +187,25 @@ elFinder.prototype.commands.quicklook.plugins = [
 							id = co.createImageData(data.width, data.height);
 							(id).data.set(new Uint8Array(data.image));
 							co.putImageData(id, 0, 0);
-							base.append($(cv).css({maxWidth:'100%',maxHeight:'100%'})).show();
+							base.append(cv).show();
 							loading.remove();
+							prop = (data.width/data.height).toFixed(2);
+							preview.on('changesize', function() {
+								var pw = parseInt(preview.width()),
+									ph = parseInt(preview.height()),
+									w, h;
+								if (prop < (pw/ph).toFixed(2)) {
+									h = ph;
+									w = Math.floor(h * prop);
+								} else {
+									w = pw;
+									h = Math.floor(w/prop);
+								}
+								$(cv).width(w).height(h).css('margin-top', h < ph ? Math.floor((ph - h)/2) : 0);
+							}).trigger('changesize');
+							if (!file.width || !file.height) {
+								setdim([data.width, data.height]);
+							}
 							ql.hideinfo();
 						};
 						wk.onerror = err;
@@ -416,12 +438,16 @@ elFinder.prototype.commands.quicklook.plugins = [
 			var fm      = ql.fm,
 				preview = ql.preview,
 				opts    = ql.options.viewerjs,
-				mimes   = opts.url? fm.arrayFlip(opts.mimes || []) : [];
+				mimes   = opts.url? fm.arrayFlip(opts.mimes || []) : [],
+				win     = ql.window,
+				navi    = ql.navbar,
+				setNavi = function() {
+					navi.css('bottom', win.hasClass('elfinder-quicklook-fullscreen')? '30px' : '');
+				};
 
 			if (opts.url) {
 				preview.on('update', function(e) {
-					var win  = ql.window,
-						file = e.file, node, loading;
+					var file = e.file, node, loading;
 
 					if (mimes[file.mime] && (file.mime !== 'application/pdf' || !opts.pdfNative || !ql.flags.pdfNative)) {
 						var url = fm.openUrl(file.hash);
@@ -444,7 +470,11 @@ elFinder.prototype.commands.quicklook.plugins = [
 								.appendTo(preview)
 								.attr('src', opts.url + '#' + url);
 
+							win.on('viewchange.viewerjs', setNavi);
+							setNavi();
+
 							preview.one('change', function() {
+								win.off('viewchange.viewerjs');
 								loading.remove();
 								node.off('load').remove();
 							});
@@ -705,7 +735,7 @@ elFinder.prototype.commands.quicklook.plugins = [
 					setNavi();
 				}
 			}
-		}).on('change', reset);
+		}).one('change', reset);
 	},
 	
 	/**
@@ -975,7 +1005,7 @@ elFinder.prototype.commands.quicklook.plugins = [
 					}
 				}
 			}
-		}).on('change', reset);
+		}).one('change', reset);
 	},
 	
 	/**
@@ -1015,7 +1045,7 @@ elFinder.prototype.commands.quicklook.plugins = [
 				win.on('viewchange.embed', setNavi);
 				setNavi();
 			}
-		}).on('change', function() {
+		}).one('change', function() {
 			if (node && node.parent().length) {
 				win.off('viewchange.embed');
 				node.remove();