[OpenLayers-Dev] Popup Changes

[Pierre GIRAUD]

First, I'm moving this discussion to ol-dev because other developers
can feel interested to contribute, at least to be informed where the
popus thing is going .

On Jan 16, 2008 6:33 PM, Tim Coulter <tim at timothyjcoulter.com> wrote:
> Hey,
>
> There's been a ton of changes to the way popups work mainly due to
> compatibility with IE 6 & 7. IE 6 has problems rendering PNG's with
> alpha transparency in CSS background images, so I had to revert some of
> the functionality back to using <img> tags instead of CSS. This caused a
> couple chain reactions which affected both IE 7, and some specific
> changes needed to be made.
>
> First change: http://trac.openlayers.org/changeset/5713
>
> sbenthall found a problem with that math where, if there were delays,
> popups would sporadically resize (and keep resizing) because the elapsed
> time was greater than the maximum allowed animation time.

This should go away with the Tween animation class. Less code and
easier to maintain.

>
> Second change: http://trac.openlayers.org/changeset/5716
>
> Started using images, but no alpha hack yet. While doing that (or maybe
> a little before), I put the image references in a hash to make them
> easier to deal with.

Sorry, I didn't get a close look at the art design and images before,
but I know wonder why we don't deal with the well-known (hum, think
so) "sliding doors" effect [1] and manage only one image for the whole
popup, as GMap already does. [2]
Extjs also relies on such a technique for the buttons for example, and
it works well. One main advantage : less images to download at once.
I'll check that soon, and will tell you how difficult it is to get this working.

>
> Change http://trac.openlayers.org/changeset/5728:
>
> Started noticing problems in IE6 where, now that the bubbles are
> actually image tags, IE6 wouldn't render them correctly. Before this
> change, the code was still using CSS to size the images, which erred in
> IE6.
>
> Change http://trac.openlayers.org/changeset/5729:
>
> This one is coupled with a CSS change I'll point to later, but I found
> that, after making the above changes, IE 7 also had problems with
> certain images being sized correctly. So, from this point on, both IE 6
> *and* IE 7 calculate the widths/heights of the variable-sized images
> while resizing.
>
> Change http://trac.openlayers.org/changeset/5736:
>
> (Note that this changes Map.js).
>
> 1) It turns out updatePosition() in Popup.js was being called twice,
> once by draw() and once by setSize().
> 2) Map.js's addPopup() has been changed because previously, the popup
> would add itself to the body to "prerender", updatePosition() to the
> correct x/y (but relative to the body!), and then Map.js would position
> it relative to the map's layer, causing a flicker. With the new
> addPopup(), the popup doesn't position itself to the body at all, and
> instead, the map adds it to the correct div to begin with.
>
> Change http://trac.openlayers.org/changeset/5738:
>
> Small change, but big effects. It turns out that if the style value is
> too far to the left, the map will blink (everything will disappear for a
> split second) when opening a popup.
>
> Let me know if you need any more info. :)
> Tim
>
>

I keep those fixes in mind. Hope we can get a cleaner code. Actually,
I would prefer less hack for IE.
I also hope that the "sliding doors" technique will help simplify the code.

Regards,
Pierre


[1] http://www.alistapart.com/articles/slidingdoors/
[2] http://www.google.com/intl/en_fr/mapfiles/iw2.png and
http://www.google.com/intl/en_fr/mapfiles/iws2.png