From 0932ae82573a74312c4f49c84d1029b19b8a608b Mon Sep 17 00:00:00 2001
From: Laurent Laffont <llaffont@afi-sa.fr>
Date: Fri, 28 Apr 2017 17:18:51 +0200
Subject: [PATCH] hotline #59707: adapt popup dialog size to browser window

---
 cosmogramme/VERSIONS_HOTLINE/59707 |  1 +
 public/opac/js/subModal.js         | 46 ++++++++++++++++++++++--------
 2 files changed, 35 insertions(+), 12 deletions(-)
 create mode 100644 cosmogramme/VERSIONS_HOTLINE/59707

diff --git a/cosmogramme/VERSIONS_HOTLINE/59707 b/cosmogramme/VERSIONS_HOTLINE/59707
new file mode 100644
index 00000000000..7ac5dca7ae9
--- /dev/null
+++ b/cosmogramme/VERSIONS_HOTLINE/59707
@@ -0,0 +1 @@
+ - ticket #59707 : la taille des popups ne peut dépasser celle de l'écran. Redimensionnement automatique au redimmensionnement du navigateur
\ No newline at end of file
diff --git a/public/opac/js/subModal.js b/public/opac/js/subModal.js
index b595bcf2f79..dcf6eb9ec78 100644
--- a/public/opac/js/subModal.js
+++ b/public/opac/js/subModal.js
@@ -3,7 +3,6 @@
   var popupDialog = null;
   var loading = 'image-loading-status';
   var current_anchor;
-  var opac_dialog = null;
 
   window.initializePopups = function() {
     $('[data-popup="true"]')
@@ -73,14 +72,15 @@
   }
 
 
-  var onOpen = function(event, ui) {
+  var onOpen = function(dialog) {
     initializePopups();
     addLoadingClass();
-    opac_dialog = $(event.target).closest('.ui-widget');
-    opac_dialog.css('position', 'fixed');
-    opac_dialog.css('top', '15%');
-    opac_dialog.css('left', '20%');
-    opac_dialog.css('width', '60%');
+
+    fixWindowPositionAndWidth(dialog);
+    
+    $(window).on('resize', function() {
+      fixWindowPositionAndWidth(dialog);
+    });
   }
 
 
@@ -104,6 +104,24 @@
   }
 
 
+  var fixWindowPositionAndWidth = function(dialog) {
+    var max_height = Math.round($(window).height() * 0.8);
+    dialog
+      .css('position', 'fixed')
+      .css('top', '15%')
+      .css('left', '20%')
+      .css('width', '60%')
+      .css('max-height', max_height + 'px')
+    
+      .find('.ui-dialog-content')
+      .css('max-height', (max_height - 50) + 'px')
+      .css('width', 'auto')
+      .css('overflow-y', 'auto');
+    
+    dialog.position({of: $(window)});
+  }
+
+
   window.opacShowModal = function(url, width, height, returnFunc, showCloseBox, titleDialog) {
     var modal_size = initModalSize(width, height);
     popupDialog = $('<iframe src="'+url+'" style="min-width:95%"></div>')
@@ -156,6 +174,8 @@
     var show_modal = (data['show_modal'] && data['show_modal']=='true')
 	? true
 	: false;
+
+    var dialog = null;
     
     var modal = container.dialog({
       title: data['title'],
@@ -164,14 +184,16 @@
 	onClose(event, ui)
       },
       open: function(event, ui) {
-	setTimeout(onOpen(event, ui), 100);
+	dialog = $(event.target).closest('.ui-widget');
+	
+	setTimeout(onOpen(dialog), 100);
       },
       resizeStart: function(event, ui) {
-	opac_dialog.css('position', 'absolute');
+	dialog.css('position', 'absolute');
       },
       resizeStop: function(event, ui) {
-	opac_dialog.css('position', 'fixed');
-	opac_dialog.position({of: $(window)});
+	dialog.css('position', 'fixed');
+	dialog.position({of: $(window)});
       }
     });
 
@@ -179,8 +201,8 @@
   }
 
 
-  window.addLoadingClass = function () {
 
+  window.addLoadingClass = function () {
     var initCurrentAnchor = function() {
       if (current_anchor != undefined)
 	return current_anchor;
-- 
GitLab