From: arno <arenevier@fdn.fr>
Date: Mon, 17 Aug 2009 21:49:04 +0000 (+0200)
Subject: removes popup scrollbars in firefox. Try to avoid them as much as possible in IE
X-Git-Tag: v0.3b_thomas~10
X-Git-Url: https://dev.renevier.net/gitweb.cgi?p=syp.git;a=commitdiff_plain;h=a34fe8cb1b7f571577d4af4399d6a850fef07041

removes popup scrollbars in firefox. Try to avoid them as much as possible in IE
---

diff --git a/inc/html/index.php b/inc/html/index.php
index 5de0a53..16409aa 100644
--- a/inc/html/index.php
+++ b/inc/html/index.php
@@ -31,7 +31,11 @@ if (defined ("POPUPPOS")) {
     <link rel="stylesheet" href="./media/syp.css" type="text/css">
     <style type="text/css">
         .olPopup {
-            <?php printf("_width: %dpx;\n", ($thumbsmaxsize + 40))?>
+            <?php printf("_width: expression(Math.min(parseInt(this.scrollWidth) + 7, %d) + 'px');\n", $thumbsmaxsize)?>
+        }
+        .olPopup p {
+            <?php printf("max-width: %dpx;\n", $thumbsmaxsize - 20)?>
+
         }
         .olPopup img {
             <?php printf("max-height: %dpx;\n", $thumbsmaxsize)?>
diff --git a/js/syp.js b/js/syp.js
index 6c59dcd..afb53bc 100644
--- a/js/syp.js
+++ b/js/syp.js
@@ -400,32 +400,87 @@ OpenLayers.Console.userError = function(error) {
 
 // sometimes, especially when cache is clear, firefox does not compute
 // correctly popup size. That's because at the end of getRenderedDimensions,
-// dimensions of image is not known. So, we work around that problem by setting
-// image width and image height. That way, dimensions of image are set in
-// innerHTML, and are therefore known in getRenderedDimensions
-OpenLayers.Popup.Anchored.prototype.registerImageListeners = function() {
-    var onImgLoad = function() {
-        this.img.width =  this.img.width;
-        this.img.height =  this.img.height;
-        this.popup.updateSize();
-        OpenLayers.Event.stopObserving(
-            this.img, "load", this.img._onImageLoad
-        );
-    };
-
-    var images = this.contentDiv.getElementsByTagName("img");
-    for (var i = 0, len = images.length; i < len; i++) {
-        var img = images[i];
-        if (img.width == 0 || img.height == 0) {
-
-            var context = {
-                'popup': this,
-                'img': img
-            };
-
-            img._onImgLoad = OpenLayers.Function.bind(onImgLoad, context);
-
-            OpenLayers.Event.observe(img, 'load', img._onImgLoad);
-        }    
-    } 
+// dimensions of image is not known. Then, popup size is too small for its
+// content. We work around the problem by checking that computed size is at
+// least as big as content. To achieve that, we need to override
+// OpenLayers.Popup.Anchored.prototype.updateSize to modify it slightly.
+OpenLayers.Popup.Anchored.prototype.updateSize = function() {
+    // determine actual render dimensions of the contents by putting its
+    // contents into a fake contentDiv (for the CSS) and then measuring it
+    var preparedHTML = "<div class='" + this.contentDisplayClass+ "'>" + 
+        this.contentDiv.innerHTML + 
+        "</div>";
+
+    var containerElement = (this.map) ? this.map.layerContainerDiv
+                                      : document.body;
+    var realSize = OpenLayers.Util.getRenderedDimensions(
+        preparedHTML, null,	{
+            displayClass: this.displayClass,
+            containerElement: containerElement
+        }
+    );
+
+    /*
+     * XXX: next four lines are added by SYP!
+     */
+    if (this.contentDiv) {
+        realSize.w = Math.max (realSize.w, this.contentDiv.scrollWidth);
+        realSize.h = Math.max (realSize.h, this.contentDiv.scrollHeight);
+    }
+
+    // is the "real" size of the div is safe to display in our map?
+    var safeSize = this.getSafeContentSize(realSize);
+
+    var newSize = null;
+    if (safeSize.equals(realSize)) {
+        //real size of content is small enough to fit on the map, 
+        // so we use real size.
+        newSize = realSize;
+
+    } else {
+
+        //make a new OL.Size object with the clipped dimensions 
+        // set or null if not clipped.
+        var fixedSize = new OpenLayers.Size();
+        fixedSize.w = (safeSize.w < realSize.w) ? safeSize.w : null;
+        fixedSize.h = (safeSize.h < realSize.h) ? safeSize.h : null;
+
+            if (fixedSize.w && fixedSize.h) {
+                //content is too big in both directions, so we will use 
+                // max popup size (safeSize), knowing well that it will 
+                // overflow both ways.                
+                newSize = safeSize;
+            } else {
+                //content is clipped in only one direction, so we need to 
+                // run getRenderedDimensions() again with a fixed dimension
+                var clippedSize = OpenLayers.Util.getRenderedDimensions(
+                    preparedHTML, fixedSize, {
+                        displayClass: this.contentDisplayClass,
+                        containerElement: containerElement
+                    }
+                );
+
+                //if the clipped size is still the same as the safeSize, 
+                // that means that our content must be fixed in the 
+                // offending direction. If overflow is 'auto', this means 
+                // we are going to have a scrollbar for sure, so we must 
+                // adjust for that.
+                //
+                var currentOverflow = OpenLayers.Element.getStyle(
+                    this.contentDiv, "overflow"
+                );
+                if ( (currentOverflow != "hidden") && 
+                     (clippedSize.equals(safeSize)) ) {
+                    var scrollBar = OpenLayers.Util.getScrollbarWidth();
+                    if (fixedSize.w) {
+                        clippedSize.h += scrollBar;
+                    } else {
+                        clippedSize.w += scrollBar;
+                    }
+                }
+
+                newSize = this.getSafeContentSize(clippedSize);
+            }
+        }                        
+        this.setSize(newSize);     
 }
diff --git a/media/syp.css b/media/syp.css
index 1a9fa05..62fa6b6 100644
--- a/media/syp.css
+++ b/media/syp.css
@@ -19,8 +19,9 @@
     border: 3px double black;
     background-color: white;
 }
+
 .olPopup img {
-    margin: 20px;
+    margin-left: 5px;
 }
 
 /* for IE (does not understand double borders */