X-Git-Url: https://dev.renevier.net/gitweb.cgi?p=syp.git;a=blobdiff_plain;f=js%2Fsyp.js;h=afb53bc0db9d2116a14379a4d40d24f51991ca15;hp=40735c791cbb516ea273c0fe40a0e85d58ecb28b;hb=a34fe8cb1b7f571577d4af4399d6a850fef07041;hpb=3b38ca36fc18d34999073625a9c66dc2f05747a3 diff --git a/js/syp.js b/js/syp.js index 40735c7..afb53bc 100644 --- a/js/syp.js +++ b/js/syp.js @@ -184,10 +184,25 @@ var SYP = { var popup = feature.popup; var popupPos = null; - if (sypSettings.popupNearfeature) { - popupPos = feature.geometry.getBounds().getCenterLonLat(); - } else { - popupPos = SYP.Utils.brCorner(map, 8); + switch (sypSettings.popupPos) { + case 0: + popupPos = feature.geometry.getBounds().getCenterLonLat(); + break; + case 1: + popupPos = SYP.Utils.tlCorner(map, 8); + break; + case 2: + popupPos = SYP.Utils.trCorner(map, 8); + break; + case 3: + popupPos = SYP.Utils.brCorner(map, 8); + break; + case 4: + popupPos = SYP.Utils.blCorner(map, 8); + break; + default: + popupPos = SYP.Utils.brCorner(map, 8); + break; } // we cannot reuse popup; we need to recreate it in order for IE @@ -238,10 +253,6 @@ var SYP = { document.getElementById('bigimg').style.maxHeight = maxHeight + "px"; document.getElementById('bigimg').style.maxWidth = maxWidth + "px"; document.getElementById('bigimg').onload = function () { - var icon = document.getElementById('bigimg_close'); - icon.style.top = this.offsetTop; - icon.style.left = this.offsetLeft + this.clientWidth - icon.clientWidth; - var heightRatio = this.clientHeight / parseInt(this.style.maxHeight); var widthRatio = this.clientWidth / parseInt(this.style.maxWidth); if (heightRatio > 1 || widthRatio > 1) { @@ -252,6 +263,10 @@ var SYP = { } } + var icon = document.getElementById('bigimg_close'); + icon.style.top = this.offsetTop; + icon.style.left = this.offsetLeft + this.clientWidth - icon.clientWidth; + }; document.getElementById('bigimg').src = href; }, @@ -263,13 +278,36 @@ var SYP = { }, Utils: { + tlCorner: function(map, margin) { + var bounds = map.calculateBounds(); + var corner = new OpenLayers.LonLat(bounds.left, bounds.top); + var cornerAsPx = map.getPixelFromLonLat(corner); + cornerAsPx = cornerAsPx.add( +margin, +margin); + return map.getLonLatFromPixel(cornerAsPx); + }, + + trCorner: function(map, margin) { + var bounds = map.calculateBounds(); + var corner = new OpenLayers.LonLat(bounds.right, bounds.top); + var cornerAsPx = map.getPixelFromLonLat(corner); + cornerAsPx = cornerAsPx.add( -margin, +margin); + return map.getLonLatFromPixel(cornerAsPx); + }, + brCorner: function(map, margin) { var bounds = map.calculateBounds(); var corner = new OpenLayers.LonLat(bounds.right, bounds.bottom); var cornerAsPx = map.getPixelFromLonLat(corner); cornerAsPx = cornerAsPx.add( -margin, -margin); - corner = map.getLonLatFromPixel(cornerAsPx); - return corner; + return map.getLonLatFromPixel(cornerAsPx); + }, + + blCorner: function(map, margin) { + var bounds = map.calculateBounds(); + var corner = new OpenLayers.LonLat(bounds.left, bounds.bottom); + var cornerAsPx = map.getPixelFromLonLat(corner); + cornerAsPx = cornerAsPx.add( +margin, -margin); + return map.getLonLatFromPixel(cornerAsPx); }, /* minimum bounds rectangle containing all feature locations. @@ -362,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 = "
" + + this.contentDiv.innerHTML + + "
"; + + 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); }