Merge branch...

Merge branch 'hotline#59707_affichage_disponibilite_des_exemplaires_dans_la_liste_de_resultats_quand_beaucoup_d_exemplaires' into 'hotline-master'

hotline #59707: adapt popup dialog size to browser window

See merge request !2134

cosmogramme/VERSIONS_HOTLINE/59707

+ - 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

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;