From 5cf684f5a23f5c02bb791c56e4626073e88a567c Mon Sep 17 00:00:00 2001
From: Laurent Destailleur <eldy@destailleur.fr>
Date: Tue, 22 Aug 2017 13:14:10 +0200
Subject: [PATCH] NEW Popup for preview of image add a button "Original size"

---
 htdocs/core/js/lib_head.js.php  | 33 ++++++++++++++++++++++++++++-----
 htdocs/langs/en_US/main.lang    |  1 +
 htdocs/theme/eldy/style.css.php | 13 +++++++++++++
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/htdocs/core/js/lib_head.js.php b/htdocs/core/js/lib_head.js.php
index 28b908aa13c..c58cd3eba9e 100644
--- a/htdocs/core/js/lib_head.js.php
+++ b/htdocs/core/js/lib_head.js.php
@@ -983,6 +983,8 @@ function newpopup(url,title) {
 function document_preview(file, type, title)
 {
 	var ValidImageTypes = ["image/gif", "image/jpeg", "image/png"];
+	var showOriginalSizeButton = false;
+
 	console.log("document_preview A click was done. file="+file+", type="+type+", title="+title);
 
 	if ($.inArray(type, ValidImageTypes) < 0) {
@@ -991,7 +993,7 @@ function document_preview(file, type, title)
 		var height = $( window ).height()*0.90;
 		var object_height='98%';
 
-		show_preview();
+		show_preview('notimage');
 
 	} else {
 		var object_width=0;
@@ -1005,23 +1007,38 @@ function document_preview(file, type, title)
 
 			width = $( window ).width()*0.90;
 			if(object_width < width){
+				console.log("Object width is small, we set width of popup according to image width.");
 				width = object_width + 30
 			}
 			height = $( window ).height()*0.85;
 			if(object_height < height){
+				console.log("Object height is small, we set height of popup according to image height.");
 				height = object_height + 80
 			}
+			else
+			{
+				showOriginalSizeButton = true;
+			}
 
-			show_preview();
+			show_preview('image');
 
 		};
 		img.src = file;
 
 	}
-	function show_preview(){
-		/* console.log("file="+file+" type="+type+" width="+width+" height="+height); */
+	function show_preview(mode) {
+		console.log("mode="+mode+" file="+file+" type="+type+" width="+width+" height="+height);
 		var newElem = '<object name="objectpreview" data="'+file+'" type="'+type+'" width="'+object_width+'" height="'+object_height+'" param="noparam"></object>';
 
+		optionsbuttons = {}
+		if (mode == 'image' && showOriginalSizeButton)
+		{
+			optionsbuttons = {
+			    "<?php echo dol_escape_js($langs->trans("OriginalSize")); ?>": function() { console.log("Click on original size"); jQuery(".ui-dialog-content.ui-widget-content > object").css({ "max-height": "none" }); },
+				"<?php echo dol_escape_js($langs->trans("Close")); ?>": function() { $( this ).dialog( "close" ); }
+				};
+		}
+
 		$("#dialogforpopup").html(newElem);
 		$("#dialogforpopup").dialog({
 			closeOnEscape: true,
@@ -1029,8 +1046,14 @@ function document_preview(file, type, title)
 			width: width,
 			height: height,
 			modal: true,
-			title: title
+			title: title,
+			buttons: optionsbuttons
 		});
+
+		if (showOriginalSizeButton)
+		{
+			jQuery(".ui-dialog-content.ui-widget-content > object").css({ "max-height": "100%", "width": "auto", "margin-left": "auto", "margin-right": "auto", "display": "block" });
+		}
 	}
 }
 
diff --git a/htdocs/langs/en_US/main.lang b/htdocs/langs/en_US/main.lang
index 9d5040afd53..d59a6276d05 100644
--- a/htdocs/langs/en_US/main.lang
+++ b/htdocs/langs/en_US/main.lang
@@ -460,6 +460,7 @@ Discount=Discount
 Unknown=Unknown
 General=General
 Size=Size
+OriginalSize=Original size
 Received=Received
 Paid=Paid
 Topic=Subject
diff --git a/htdocs/theme/eldy/style.css.php b/htdocs/theme/eldy/style.css.php
index 07d73b86758..a4e0a2f6a66 100644
--- a/htdocs/theme/eldy/style.css.php
+++ b/htdocs/theme/eldy/style.css.php
@@ -3148,6 +3148,19 @@ div.titre {
     font-size: <?php print $fontsize; ?>px !important;
 }
 
+
+/* ============================================================================== */
+/* For content of image preview                                                   */
+/* ============================================================================== */
+
+/*
+.ui-dialog-content.ui-widget-content > object {
+     max-height: none;
+     width: auto; margin-left: auto; margin-right: auto; display: block;
+}
+*/
+
+
 /* ============================================================================== */
 /* Formulaire confirmation (When HTML is used)                                    */
 /* ============================================================================== */