pan/zoom panels

[crschmidt]

Convert the pan/zoom controls to be panel based, and style them with CSS

[crschmidt]

See also r6393,  http://dev.openlayers.org/sandbox/crschmidt/demo/examples/pan-zoom-panels.html

[tschaub]

more control

[tschaub]

This is a nice enhancement Chris. Thanks for the work. The updated patch works against r7312. (I assume you'll also add the relevant theme/default/img/*.png.)

My only other comment is that I like the names OpenLayers.Control.ZoomIn etc better than the ZoomInButton equivalents - since someone could just as well be triggering these controls with an anchor or an image or any other element or some random event. (Though I make an exception for the *Panel classes.) With or without that change, I think this is a great addition.

Please commit.

[euzuro]

some things i notice about this patch:

1) @requires OpenLayers/Control/Control.js

(should be OpenLayers/Control.js, no?)

2) Engrish: "The type of OpenLayers.Control -- When are added to a Control.Panel the panel uses this to determine how to handle our events"

3) Constants

OpenLayers.Control.PanButton.NORTH = "NORTH";  
OpenLayers.Control.PanButton.SOUTH = "SOUTH";  
OpenLayers.Control.PanButton.EAST = "EAST";  
OpenLayers.Control.PanButton.WEST = "WEST";  

... what if you set them instead as this:

OpenLayers.Control.PanButton.NORTH = "North";  
OpenLayers.Control.PanButton.SOUTH = "South";  
OpenLayers.Control.PanButton.EAST = "East";  
OpenLayers.Control.PanButton.WEST = "West";  

then this:

     switch(this.direction){  
             case OpenLayers.Control.PanButton.NORTH:  
                 this.CLASS_NAME += "North";  
                 break;  
             case OpenLayers.Control.PanButton.SOUTH:  
                 this.CLASS_NAME += "South";  
                 break;  
             case OpenLayers.Control.PanButton.EAST:  
                 this.CLASS_NAME += "East";  
                 break;  
             case OpenLayers.Control.PanButton.WEST:  
                 this.CLASS_NAME += "West";  
                 break;  
         }  

... could become this:

         this.CLASS_NAME += this.direction;  

4) tabs

... see forthcoming patch

[euzuro]

4 updates as described in comment

[euzuro]

couple more things

1) no need to override draw() in ZoomPanel

2) this code doesn't seem to ever get called... is the idea that users can override the class name? i can't see why anyone would want to do that. for now i have pulled these lines out. there well may be something i'm blatantly overlooking, feel free to fill me in.

        if(options && options.displayClass){
			this.displayClass = options.displayClass;
        }

see forthcoming patch...

[euzuro]

last few changes to proposed patch

[euzuro]

of note, these png's don't look good in ie6. sugerencias?

[euzuro]

also of note, should we maybe consider doing the sprite trick like for the history navigation control?

[fredj]

Uses css sprites, only tested on FF3

[fredj]

pan images

[fredj]

zoom images

[tschaub]

Nice changes folks. I'm attaching one more patch. This one changes some doc comments, gives the example some style, and changes names like ZoomInButton to ZoomIn. I can talk more about why I think this is a better name if anybody is interested. If you don't like these names, please consider the other (minor) changes to the example and comments.

[tschaub]

zoom and pan panls

[euzuro]

some small changes to ND for Pan file

[euzuro]

I've added yet a few more small mods to tschaub's patch, just some changes to the ND in for the Pan.js file's Pan Constructor.

I would say this is good to go, all but for the fact that I load it in ie6 and the alpha bits on the controls don't show up correctly.

Can anyone take a look at this?

[tschaub]

no alpha channel

[tschaub]

no alpha channel

[tschaub]

I can't look at it in IE, but there are some images w/o alpha transparency.

Now, how about a nice little CSS hack for IE6 so these ugly images only show up there?

<!--[if lte IE 6]>
    do something
<![endif]-->

[tschaub]

and, in case it is not clear, "do something" above would be a link to an ie6 only stylesheet

[euzuro]

see #1607

[euzuro]

Replying to tschaub:

I can't look at it in IE, but there are some images w/o alpha transparency. Now, how about a nice little CSS hack for IE6 so these ugly images only show up there? {{{ <!--[if lte IE 6]> do something <![endif]--> }}}

as far as i unerstand, this hack only works in HTML files, not in .css stylesheets. :-(

[euzuro]

aah... ok. so cr5 clarified this a bit to me.

the idea would be to add a new, special css file for only ie6.

then we instruct people that if they want to support ie6 users they have to add the [lte IE 6] trick to selectively add the new ie6-specific stylesheet.

[euzuro]

upon further discussion with herr schmidt, we determined that actually... this whole thing is sort of a moot point.

the idea of a special ie6 style sheet is fine, but it shouldn't hold up the inclusion of this patch.

basically, the whole idea of this patch is to allow other people to put their own images in there for this control.

That, combined with the fact that this control is not replacing the default pan/zoom setup... we basically have nothing to lose. If people like this zoompanel thing and want to use it and also want ie6 to look pretty...

....well then they can implement their own ie6 specific css-ing. No problemo! Everyone wins!

[euzuro]

At this point, this patch has been added to and reviewed by nearly every member of the dev team. I think it's good to go. I'll give it another look over tomorrow morning and then put it in... unless someone has an objection.

Note that I've opened a ticket for looking into implementing some ie6-specific css here: #1717

[euzuro]

(In [7950]) Add new ZoomPanel and PanPanel, a step towards a more easily customizable look for OpenLayers. Work on this ticket was done by a slew of contributors, and reviews as well. Thanks especially to tschaub for the ie6 trick and concomittant non-alpha images. (Closes #1400).

[euzuro]

So in the end, I decided to make the special ie6-style.css file just for kicks. It is in there in the default theme zone. As you can see in the html example, you have to make special jones to include it in your html. As it should be.

again, thanks to everyone for their help with this patch.

bing.

[euzuro]

r7956 was related to this