OpenLayers OpenLayers

Ticket #926: popups.4.patch

File popups.4.patch, 209.3 kB (added by crschmidt, 8 months ago)

latest version -- try 2

  • theme/default/style.css

    old new  
    113113 
    114114.olPopupContent { 
    115115    padding:5px; 
     116    overflow: auto; 
    116117}     
    117118.olControlNavToolbar {  
    118119    width:0px; 
    …… 
    231232    filter: alpha(opacity=50); 
    232233}    
    233234 
    234 .olControlNoSelect  { 
    235   -moz-user-select: none;  
    236 }  
    237  
     235/*  
     236 * Due to current limitations in the OpenLayers code, you can only 
     237 * replace this image with another image which is 17px x 17px.  
     238 */    
     239.olPopupCloseBox { 
     240  background: url("../../img/close.gif") no-repeat; 
     241  cursor: pointer; 
     242} 

  • theme/default/framedCloud.css

    old new  
     1 
     2.olFramedCloudPopupContent { 
     3    padding: 5px; 
     4    overflow: auto; 
     5} 

  • tests/test_Popup.html

    old new  
    8484        popup.lonlat = true; 
    8585        popup.updatePosition(); 
    8686        t.ok(true, "update position doesn't fail when getLayerPxFromLonLat fails."); 
     87        map.destroy(); 
    8788    } 
    8889    function test_03_Popup_draw(t) { 
    89         t.plan( 17 ); 
     90        t.plan( 13 ); 
    9091         
    9192        var id = "chicken"; 
    9293        var x = 50; 
    …… 
    9899        var hexColor = "#ff0000"; 
    99100        var opacity = 0.5; 
    100101        var border = "1px solid"; 
    101  
     102        map1 = new OpenLayers.Map("map"); 
    102103        popup = new OpenLayers.Popup(id); 
    103104        popup.setSize(new OpenLayers.Size(w, h)); 
    104105        popup.setContentHTML(content); 
    105106        popup.setBackgroundColor(color); 
    106107        popup.setOpacity(opacity); 
    107108        popup.setBorder(border); 
    108         popup.draw(new OpenLayers.Pixel(x, y)); 
     109        map1.addPopup(popup); 
     110        popup.moveTo(new OpenLayers.Pixel(x, y)); 
    109111                                      
    110112        t.eq(popup.div.id, id, "popup.div.id set correctly"); 
    111113        t.eq(popup.div.style.left, x + "px", "left position of popup.div set correctly"); 
    112114        t.eq(popup.div.style.top, y + "px", "top position of popup.div set correctly"); 
    113         t.eq(popup.div.style.width, w + "px", "width position of popup.div set correctly"); 
    114         t.eq(popup.div.style.height, h + "px", "heightposition of popup.div set correctly"); 
    115115 
    116116        var contentDiv = popup.div.childNodes[0].childNodes[0]; 
    117117         
    118118        t.eq(contentDiv.className, "olPopupContent", "correct content div className"); 
    119119        t.eq(contentDiv.id, "chicken_contentDiv", "correct content div id"); 
    120         t.eq(contentDiv.style.width, "500px", "correct content div width");  
    121         t.eq(contentDiv.style.height, "400px", "correct content div height"); 
    122120        t.eq(contentDiv.style.position, "relative", "correct content div position"); 
    123121        //Safari 3 separates style overflow into overflow-x and overflow-y 
    124122        var prop = (OpenLayers.Util.getBrowserName() == 'safari') ? 'overflowX' : 'overflow'; 
    125         t.eq(contentDiv.style[prop], "hidden", "correct content div overflow"); 
     123        t.eq(contentDiv.style[prop], "", "correct content div overflow"); 
    126124        t.eq(contentDiv.innerHTML, content, "correct content div content"); 
    127125 
    128126        var bColor = popup.div.style.backgroundColor; 

  • tests/Layer/test_GeoRSS.html

    old new  
    9797        }); 
    9898    } 
    9999    function test_Layer_GeoRSS_popups (t) { 
    100         t.plan( 8 );     
     100        t.plan( 6 );     
    101101        layer = new OpenLayers.Layer.GeoRSS('Test Layer', georss_txt); 
    102102        var map = new OpenLayers.Map('map'); 
    103103        var baseLayer = new OpenLayers.Layer.WMS("Test Layer",  
    …… 
    113113          layer.markers[0].events.triggerEvent('click', event); 
    114114          t.eq(map.popups.length, 1, "Popup opened correctly"); 
    115115          t.eq(map.popups[0].size.w, 250, "Popup sized correctly x"); 
    116           t.eq(map.popups[0].size.h, 120, "Popup sized correctly y"); 
    117116          layer.markers[1].events.triggerEvent('click', event); 
    118117          t.eq(map.popups.length, 1, "1st popup gone, 2nd Popup opened correctly"); 
    119118          t.eq(map.popups[0].size.w, 250, "Popup sized correctly x"); 
    120           t.eq(map.popups[0].size.h, 120, "Popup sized correctly y"); 
    121119        }); 
    122120         
    123121    } 
    124122    function test_Layer_GeoRSS_resizedPopups(t) { 
    125123        layer = new OpenLayers.Layer.GeoRSS('Test Layer', georss_txt, {'popupSize': new OpenLayers.Size(200,100)}); 
    126         t.plan( 8 );     
     124        t.plan( 6 );     
    127125        var map = new OpenLayers.Map('map'); 
    128126        var baseLayer = new OpenLayers.Layer.WMS("Test Layer",  
    129127            "http://octo.metacarta.com/cgi-bin/mapserv?", 
    …… 
    138136          layer.markers[0].events.triggerEvent('click', event); 
    139137          t.eq(map.popups.length, 1, "Popup opened correctly"); 
    140138          t.eq(map.popups[0].size.w, 200, "Popup sized correctly x"); 
    141           t.eq(map.popups[0].size.h, 100, "Popup sized correctly y"); 
    142139          map.popups[0].size.w=300; 
    143140          layer.markers[1].events.triggerEvent('click', event); 
    144141          t.eq(map.popups.length, 1, "1st popup gone, 2nd Popup opened correctly"); 
    145142          t.eq(map.popups[0].size.w, 200, "Popup sized correctly x"); 
    146           t.eq(map.popups[0].size.h, 100, "Popup sized correctly y"); 
    147143        }); 
    148144    }     
    149145 

  • lib/OpenLayers/Map.js

    old new  
    354354    panMethod: OpenLayers.Easing.Expo.easeOut, 
    355355     
    356356    /** 
     357     * Property: paddingForPopups 
     358     * {<OpenLayers.Bounds>} Outside margin of the popup. Used to prevent  
     359     *     the popup from getting too close to the map border. 
     360     */ 
     361    paddingForPopups : null, 
     362     
     363    /** 
    357364     * Constructor: OpenLayers.Map 
    358365     * Constructor for a new OpenLayers.Map instance. 
    359366     * 
    …… 
    384391                                            OpenLayers.Map.TILE_HEIGHT); 
    385392         
    386393        this.maxExtent = new OpenLayers.Bounds(-180, -90, 180, 90); 
     394         
     395        this.paddingForPopups = new OpenLayers.Bounds(15, 15, 15, 15); 
    387396 
    388397        this.theme = OpenLayers._getScriptLocation() +  
    389398                             'theme/default/style.css';  
    …… 
    525534        } else { 
    526535            this.events.unregister("resize", this, this.updateSize); 
    527536        }     
     537         
     538        this.paddingForPopups = null;     
    528539 
    529540        if (this.controls != null) { 
    530541            for (var i = this.controls.length - 1; i>=0; --i) { 

  • lib/OpenLayers/Control.js

    old new  
    7979    type: null,  
    8080 
    8181    /**  
    82      * Property: allowSelection 
    83      * {Boolean} By deafault, controls do not allow selection, because 
    84      * it may interfere with map dragging. If this is true, OpenLayers 
    85      * will not prevent selection of the control. 
    86      * Default is false. 
    87      */ 
    88     allowSelection: false,   
    89  
    90     /**  
    9182     * Property: displayClass  
    9283     * {string}  This property is used for CSS related to the drawing of the 
    9384     * Control.  
    …… 
    249240        if (this.div == null) { 
    250241            this.div = OpenLayers.Util.createDiv(this.id); 
    251242            this.div.className = this.displayClass; 
    252             if (!this.allowSelection) { 
    253                 this.div.className += " olControlNoSelect"; 
    254                 this.div.setAttribute("unselectable", "on", 0); 
    255                 this.div.onselectstart = function() { return(false); };  
    256             }     
    257243            if (this.title != "") { 
    258244                this.div.title = this.title; 
    259245            } 

  • lib/OpenLayers/Popup/FramedCloud.js

    old new  
     1/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD 
     2 * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the 
     3 * full text of the license. */ 
     4 
     5/** 
     6 * @requires OpenLayers/Popup/Framed.js 
     7 * @requires OpenLayers/Util.js 
     8 */ 
     9 
     10/** 
     11 * Class: OpenLayers.Popup.FramedCloud 
     12 *  
     13 * Inherits from:  
     14 *  - <OpenLayers.Popup.Framed> 
     15 */ 
     16OpenLayers.Popup.FramedCloud =  
     17  OpenLayers.Class(OpenLayers.Popup.Framed, { 
     18 
     19    /** 
     20     * APIProperty: autoSize 
     21     * {Boolean} Framed Cloud is autosizing by default. 
     22     */ 
     23    autoSize: true, 
     24 
     25    /** 
     26     * APIProperty: panMapIfOutOfView 
     27     * {Boolean} Framed Cloud does pan into view by default. 
     28     */ 
     29    panMapIfOutOfView: true, 
     30 
     31    /** 
     32     * Property: imageSrc 
     33     * {String} 
     34     */ 
     35    imageSrc: OpenLayers.Util.getImagesLocation() + 'cloud-popup-relative.png', 
     36 
     37    /** 
     38     * APIProperty: imageSize 
     39     * {<OpenLayers.Size>} 
     40     */ 
     41    imageSize: new OpenLayers.Size(676, 736), 
     42 
     43    /** 
     44     * APIProperty: isAlphaImage 
     45     * {Boolean} The FramedCloud does not use an alpha image (in honor of the  
     46     *     good ie6 folk out there) 
     47     */ 
     48    isAlphaImage: false, 
     49 
     50    /**  
     51     * APIProperty: fixedRelativePosition 
     52     * {Boolean} The Framed Cloud popup works in just one fixed position. 
     53     */ 
     54    fixedRelativePosition: false, 
     55 
     56    /** 
     57     * Property: positionBlocks 
     58     * {Object} Hash of differen position blocks, keyed by relativePosition 
     59     *     two-character code string (ie "tl", "tr", "bl", "br") 
     60     */ 
     61    positionBlocks: { 
     62        "tl": { 
     63            'offset': new OpenLayers.Pixel(44, 0), 
     64            'padding': new OpenLayers.Bounds(8, 40, 8, 9), 
     65            'blocks': [ 
     66                { // top-left 
     67                    size: new OpenLayers.Size('auto', 'auto'), 
     68                    anchor: new OpenLayers.Bounds(0, 51, 22, 0), 
     69                    position: new OpenLayers.Pixel(0, 0) 
     70                }, 
     71                { //top-right 
     72                    size: new OpenLayers.Size(22, 'auto'), 
     73                    anchor: new OpenLayers.Bounds(null, 50, 0, 0), 
     74                    position: new OpenLayers.Pixel(-638, 0) 
     75                }, 
     76                { //bottom-left 
     77                    size: new OpenLayers.Size('auto', 21), 
     78                    anchor: new OpenLayers.Bounds(0, 32, 80, null), 
     79                    position: new OpenLayers.Pixel(0, -629) 
     80                }, 
     81                { //bottom-right 
     82                    size: new OpenLayers.Size(22, 21), 
     83                    anchor: new OpenLayers.Bounds(null, 32, 0, null), 
     84                    position: new OpenLayers.Pixel(-638, -629) 
     85                }, 
     86                { // stem 
     87                    size: new OpenLayers.Size(81, 54), 
     88                    anchor: new OpenLayers.Bounds(null, 0, 0, null), 
     89                    position: new OpenLayers.Pixel(0, -668) 
     90                } 
     91            ] 
     92        }, 
     93        "tr": { 
     94            'offset': new OpenLayers.Pixel(-45, 0), 
     95            'padding': new OpenLayers.Bounds(8, 40, 8, 9), 
     96            'blocks': [ 
     97                { // top-left 
     98                    size: new OpenLayers.Size('auto', 'auto'), 
     99                    anchor: new OpenLayers.Bounds(0, 51, 22, 0), 
     100                    position: new OpenLayers.Pixel(0, 0) 
     101                }, 
     102                { //top-right 
     103                    size: new OpenLayers.Size(22, 'auto'), 
     104                    anchor: new OpenLayers.Bounds(null, 50, 0, 0), 
     105                    position: new OpenLayers.Pixel(-638, 0) 
     106                }, 
     107                { //bottom-left 
     108                    size: new OpenLayers.Size('auto', 21), 
     109                    anchor: new OpenLayers.Bounds(0, 32, 22, null), 
     110                    position: new OpenLayers.Pixel(0, -629) 
     111                }, 
     112                { //bottom-right 
     113                    size: new OpenLayers.Size(22, 21), 
     114                    anchor: new OpenLayers.Bounds(null, 32, 0, null), 
     115                    position: new OpenLayers.Pixel(-638, -629) 
     116                }, 
     117                { // stem 
     118                    size: new OpenLayers.Size(81, 54), 
     119                    anchor: new OpenLayers.Bounds(0, 0, null, null), 
     120                    position: new OpenLayers.Pixel(-215, -668) 
     121                } 
     122            ] 
     123        }, 
     124        "bl": { 
     125            'offset': new OpenLayers.Pixel(45, 0), 
     126            'padding': new OpenLayers.Bounds(8, 9, 8, 40), 
     127            'blocks': [ 
     128                { // top-left 
     129                    size: new OpenLayers.Size('auto', 'auto'), 
     130                    anchor: new OpenLayers.Bounds(0, 21, 22, 32), 
     131                    position: new OpenLayers.Pixel(0, 0) 
     132                }, 
     133                { //top-right 
     134                    size: new OpenLayers.Size(22, 'auto'), 
     135                    anchor: new OpenLayers.Bounds(null, 21, 0, 32), 
     136                    position: new OpenLayers.Pixel(-638, 0) 
     137                }, 
     138                { //bottom-left 
     139                    size: new OpenLayers.Size('auto', 21), 
     140                    anchor: new OpenLayers.Bounds(0, 0, 22, null), 
     141                    position: new OpenLayers.Pixel(0, -629) 
     142                }, 
     143                { //bottom-right 
     144                    size: new OpenLayers.Size(22, 21), 
     145                    anchor: new OpenLayers.Bounds(null, 0, 0, null), 
     146                    position: new OpenLayers.Pixel(-638, -629) 
     147                }, 
     148                { // stem 
     149                    size: new OpenLayers.Size(81, 54), 
     150                    anchor: new OpenLayers.Bounds(null, null, 0, 0), 
     151                    position: new OpenLayers.Pixel(-101, -674) 
     152                } 
     153            ] 
     154        }, 
     155        "br": { 
     156            'offset': new OpenLayers.Pixel(-44, 0), 
     157            'padding': new OpenLayers.Bounds(8, 9, 8, 40), 
     158            'blocks': [ 
     159                { // top-left 
     160                    size: new OpenLayers.Size('auto', 'auto'), 
     161                    anchor: new OpenLayers.Bounds(0, 21, 22, 32), 
     162                    position: new OpenLayers.Pixel(0, 0) 
     163                }, 
     164                { //top-right 
     165                    size: new OpenLayers.Size(22, 'auto'), 
     166                    anchor: new OpenLayers.Bounds(null, 21, 0, 32), 
     167                    position: new OpenLayers.Pixel(-638, 0) 
     168                }, 
     169                { //bottom-left 
     170                    size: new OpenLayers.Size('auto', 21), 
     171                    anchor: new OpenLayers.Bounds(0, 0, 22, null), 
     172                    position: new OpenLayers.Pixel(0, -629) 
     173                }, 
     174                { //bottom-right 
     175                    size: new OpenLayers.Size(22, 21), 
     176                    anchor: new OpenLayers.Bounds(null, 0, 0, null), 
     177                    position: new OpenLayers.Pixel(-638, -629) 
     178                }, 
     179                { // stem 
     180                    size: new OpenLayers.Size(81, 54), 
     181                    anchor: new OpenLayers.Bounds(0, null, null, 0), 
     182                    position: new OpenLayers.Pixel(-311, -674) 
     183                } 
     184            ] 
     185        } 
     186    }, 
     187 
     188    /** 
     189     * APIProperty: minSize 
     190     * {<OpenLayers.Size>} 
     191     */ 
     192    minSize: new OpenLayers.Size(105, 10), 
     193 
     194    /** 
     195     * APIProperty: maxSize 
     196     * {<OpenLayers.Size>} 
     197     */ 
     198    maxSize: new OpenLayers.Size(600, 660), 
     199 
     200    /**  
     201     * Constructor: OpenLayers.Popup.FramedCloud 
     202     *  
     203     * Parameters: 
     204     * id - {String} 
     205     * lonlat - {<OpenLayers.LonLat>} 
     206     * size - {<OpenLayers.Size>} 
     207     * contentHTML - {String} 
     208     * anchor - {Object} Object to which we'll anchor the popup. Must expose  
     209     *     a 'size' (<OpenLayers.Size>) and 'offset' (<OpenLayers.Pixel>)  
     210     *     (Note that this is generally an <OpenLayers.Icon>). 
     211     * closeBox - {Boolean} 
     212     * closeBoxCallback - {Function} Function to be called on closeBox click. 
     213     */ 
     214    initialize:function(id, lonlat, size, contentHTML, anchor, closeBox,  
     215                        closeBoxCallback) { 
     216 
     217        OpenLayers.Popup.Framed.prototype.initialize.apply(this, arguments); 
     218        this.contentDiv.className = "olFramedCloudPopupContent"; 
     219    }, 
     220 
     221    /**  
     222     * APIMethod: destroy 
     223     */ 
     224    destroy: function() { 
     225        OpenLayers.Popup.Framed.prototype.destroy.apply(this, arguments); 
     226    }, 
     227 
     228    CLASS_NAME: "OpenLayers.Popup.FramedCloud" 
     229}); 

  • lib/OpenLayers/Popup/Framed.js

    old new  
     1/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD 
     2 * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the 
     3 * full text of the license. */ 
     4 
     5/** 
     6 * @requires OpenLayers/Popup/Anchored.js 
     7 */ 
     8 
     9/** 
     10 * Class: OpenLayers.Popup.Framed 
     11 *  
     12 * Inherits from: 
     13 *  - <OpenLayers.Popup.Anchored> 
     14 */ 
     15OpenLayers.Popup.Framed = 
     16  OpenLayers.Class(OpenLayers.Popup.Anchored, { 
     17 
     18    /** 
     19     * Property: imageSrc 
     20     * {String} location of the image to be used as the popup frame 
     21     */ 
     22    imageSrc: null, 
     23 
     24    /** 
     25     * Property: imageSize 
     26     * {<OpenLayers.Size>} Size (measured in pixels) of the image located 
     27     *     by the 'imageSrc' property. 
     28     */ 
     29    imageSize: null, 
     30 
     31    /** 
     32     * APIProperty: isAlphaImage 
     33     * {Boolean} The image has some alpha and thus needs to use the alpha  
     34     *     image hack. Note that setting this to true will have no noticeable 
     35     *     effect in FF or IE7 browsers, but will all but crush the ie6  
     36     *     browser.  
     37     *     Default is false. 
     38     */ 
     39    isAlphaImage: false, 
     40 
     41    /** 
     42     * Property: positionBlocks 
     43     * {Object} Hash of different position blocks (Object/Hashs). Each block  
     44     *     will be keyed by a two-character 'relativePosition'  
     45     *     code string (ie "tl", "tr", "bl", "br"). Block properties are  
     46     *     'offset', 'padding' (self-explanatory), and finally the 'blocks' 
     47     *     parameter, which is an array of the block objects.  
     48     *  
     49     *     Each block object must have 'size', 'anchor', and 'position'  
     50     *     properties. 
     51     *  
     52     *     Note that positionBlocks should never be modified at runtime. 
     53     */ 
     54    positionBlocks: null, 
     55 
     56    /** 
     57     * Property: blocks 
     58     * {Array[Object]} Array of objects, each of which is one "block" of the  
     59     *     popup. Each block has a 'div' and an 'image' property, both of  
     60     *     which are DOMElements, and the latter of which is appended to the  
     61     *     former. These are reused as the popup goes changing positions for 
     62     *     great economy and elegance. 
     63     */ 
     64    blocks: null, 
     65 
     66    /**  
     67     * APIProperty: fixedRelativePosition 
     68     * {Boolean} We want the framed popup to work dynamically placed relative 
     69     *     to its anchor but also in just one fixed position. A well designed 
     70     *     framed popup will have the pixels and logic to display itself in  
     71     *     any of the four relative positions, but (understandably), this will 
     72     *     not be the case for all of them. By setting this property to 'true',  
     73     *     framed popup will not recalculate for the best placement each time 
     74     *     it's open, but will always open the same way.  
     75     *     Note that if this is set to true, it is generally advisable to also 
     76     *     set the 'panIntoView' property to true so that the popup can be  
     77     *     scrolled into view (since it will often be offscreen on open) 
     78     *     Default is false. 
     79     */ 
     80    fixedRelativePosition: false, 
     81 
     82    /**  
     83     * Constructor: OpenLayers.Popup.Framed 
     84     *  
     85     * Parameters: 
     86     * id - {String} 
     87     * lonlat - {<OpenLayers.LonLat>} 
     88     * size - {<OpenLayers.Size>} 
     89     * contentHTML - {String} 
     90     * anchor - {Object} Object to which we'll anchor the popup. Must expose  
     91     *     a 'size' (<OpenLayers.Size>) and 'offset' (<OpenLayers.Pixel>)  
     92     *     (Note that this is generally an <OpenLayers.Icon>). 
     93     * closeBox - {Boolean} 
     94     * closeBoxCallback - {Function} Function to be called on closeBox click. 
     95     */ 
     96    initialize:function(id, lonlat, size, contentHTML, anchor, closeBox,  
     97                        closeBoxCallback) { 
     98 
     99        OpenLayers.Popup.Anchored.prototype.initialize.apply(this, arguments); 
     100 
     101        if (this.fixedRelativePosition) { 
     102            //based on our decided relativePostion, set the current padding 
     103            // this keeps us from getting into trouble  
     104            this.updateRelativePosition(); 
     105             
     106            //make calculateRelativePosition always returnt the specified 
     107            // fiexed position. 
     108            this.calculateRelativePosition = function(px) { 
     109                return this.relativePosition; 
     110            }; 
     111        } 
     112 
     113        this.contentDiv.style.position = "absolute"; 
     114        this.contentDiv.style.zIndex = 1; 
     115 
     116        if (closeBox) { 
     117            this.closeDiv.style.zIndex = 1; 
     118        } 
     119 
     120        this.groupDiv.style.position = "absolute"; 
     121        this.groupDiv.style.top = "0px"; 
     122        this.groupDiv.style.left = "0px"; 
     123        this.groupDiv.style.height = "100%"; 
     124        this.groupDiv.style.width = "100%"; 
     125    }, 
     126 
     127    /**  
     128     * APIMethod: destroy 
     129     */ 
     130    destroy: function() { 
     131        this.imageSrc = null; 
     132        this.imageSize = null; 
     133        this.isAlphaImage = null; 
     134 
     135        this.fixedRelativePosition = false; 
     136        this.positionBlocks = null; 
     137 
     138        //remove our blocks 
     139        for(var i = 0; i < this.blocks.length; i++) { 
     140            var block = this.blocks[i]; 
     141 
     142            if (block.image) { 
     143                block.div.removeChild(block.image); 
     144            } 
     145            block.image = null; 
     146 
     147            if (block.div) { 
     148                this.groupDiv.removeChild(block.div); 
     149            } 
     150            block.div = null; 
     151        } 
     152        this.blocks = null; 
     153 
     154        OpenLayers.Popup.Anchored.prototype.destroy.apply(this, arguments); 
     155    }, 
     156 
     157    /** 
     158     * APIMethod: setBackgroundColor 
     159     */ 
     160    setBackgroundColor:function(color) { 
     161        //does nothing since the framed popup's entire scheme is based on a  
     162        // an image -- changing the background color makes no sense.  
     163    }, 
     164 
     165    /** 
     166     * APIMethod: setBorder 
     167     */ 
     168    setBorder:function() { 
     169        //does nothing since the framed popup's entire scheme is based on a  
     170        // an image -- changing the popup's border makes no sense.  
     171    }, 
     172 
     173    /** 
     174     * Method: setOpacity 
     175     * Sets the opacity of the popup. 
     176     *  
     177     * Parameters: 
     178     * opacity - {float} A value between 0.0 (transparent) and 1.0 (solid).    
     179     */ 
     180    setOpacity:function(opacity) { 
     181        //does nothing since we suppose that we'll never apply an opacity 
     182        // to a framed popup 
     183    }, 
     184 
     185    /** 
     186     * APIMethod: setSize 
     187     * Overridden here, because we need to update the blocks whenever the size 
     188     *     of the popup has changed. 
     189     *  
     190     * Parameters: 
     191     * size - {<OpenLayers.Size>} 
     192     */ 
     193    setSize:function(size) {  
     194        OpenLayers.Popup.Anchored.prototype.setSize.apply(this, arguments); 
     195 
     196        this.updateBlocks(); 
     197    }, 
     198 
     199    /** 
     200     * Method: updateRelativePosition 
     201     * When the relative position changes, we need to set the new padding  
     202     *     BBOX on the popup, reposition the close div, and update the blocks. 
     203     */ 
     204    updateRelativePosition: function() { 
     205 
     206        //update the padding 
     207        this.padding = this.positionBlocks[this.relativePosition].padding; 
     208 
     209        //update the position of our close box to new padding 
     210        if (this.closeDiv) { 
     211            // use the content div's css padding to determine if we should 
     212            //  padd the close div 
     213            var contentDivPadding = this.getContentDivPadding(); 
     214 
     215            this.closeDiv.style.right = contentDivPadding.right +  
     216                                        this.padding.right + "px"; 
     217            this.closeDiv.style.top = contentDivPadding.top +  
     218                                      this.padding.top + "px"; 
     219        } 
     220 
     221        this.updateBlocks(); 
     222    }, 
     223 
     224    /**  
     225     * Method: calculateNewPx 
     226     * Besides the standard offset as determined by the Anchored class, our  
     227     *     Framed popups have a special 'offset' property for each of their  
     228     *     positions, which is used to offset the popup relative to its anchor. 
     229     *  
     230     * Parameters: 
     231     * px - {<OpenLayers.Pixel>} 
     232     *  
     233     * Returns: 
     234     * {<OpenLayers.Pixel>} The the new px position of the popup on the screen 
     235     *     relative to the passed-in px. 
     236     */ 
     237    calculateNewPx:function(px) { 
     238        var newPx = OpenLayers.Popup.Anchored.prototype.calculateNewPx.apply( 
     239            this, arguments 
     240        ); 
     241 
     242        newPx = newPx.offset(this.positionBlocks[this.relativePosition].offset); 
     243 
     244        return newPx; 
     245    }, 
     246 
     247    /** 
     248     * Method: createBlocks 
     249     */ 
     250    createBlocks: function() { 
     251        this.blocks = []; 
     252 
     253        var position = this.positionBlocks[this.relativePosition]; 
     254        for (var i = 0; i < position.blocks.length; i++) { 
     255 
     256            var block = {}; 
     257            this.blocks.push(block); 
     258 
     259            var divId = this.id + '_FrameDecorationDiv_' + i; 
     260            block.div = OpenLayers.Util.createDiv(divId,  
     261                null, null, null, "absolute", null, "hidden", null 
     262            ); 
     263 
     264            var imgId = this.id + '_FrameDecorationImg_' + i; 
     265            var imageCreator =  
     266                (this.isAlphaImage) ? OpenLayers.Util.createAlphaImageDiv 
     267                                    : OpenLayers.Util.createImage; 
     268 
     269            block.image = imageCreator(imgId,  
     270                null, this.imageSize, this.imageSrc,  
     271                "absolute", null, null, null 
     272            ); 
     273 
     274            block.div.appendChild(block.image); 
     275            this.groupDiv.appendChild(block.div); 
     276        } 
     277    }, 
     278 
     279    /** 
     280     * Method: updateBlocks 
     281     * Internal method, called on initialize and when the popup's relative 
     282     *     position has changed. This function takes care of re-positioning 
     283     *     the popup's blocks in their appropropriate places. 
     284     */ 
     285    updateBlocks: function() { 
     286 
     287        if (!this.blocks) { 
     288            this.createBlocks(); 
     289        } 
     290 
     291        var position = this.positionBlocks[this.relativePosition]; 
     292        for (var i = 0; i < position.blocks.length; i++) { 
     293 
     294            var positionBlock = position.blocks[i]; 
     295            var block = this.blocks[i]; 
     296 
     297            // adjust sizes 
     298            var l = positionBlock.anchor.left; 
     299            var b = positionBlock.anchor.bottom; 
     300            var r = positionBlock.anchor.right; 
     301            var t = positionBlock.anchor.top; 
     302 
     303            //note that we use the isNaN() test here because if the  
     304            // size object is initialized with a "auto" parameter, the  
     305            // size constructor calls parseFloat() on the string,  
     306            // which will turn it into NaN 
     307            // 
     308            var w = (isNaN(positionBlock.size.w)) ? this.size.w - (r + l)  
     309                                                  : positionBlock.size.w; 
     310 
     311            var h = (isNaN(positionBlock.size.h)) ? this.size.h - (b + t)  
     312                                                  : positionBlock.size.h; 
     313 
     314            block.div.style.width = w + 'px'; 
     315            block.div.style.height = h + 'px'; 
     316 
     317            block.div.style.left = (l != null) ? l + 'px' : ''; 
     318            block.div.style.bottom = (b != null) ? b + 'px' : ''; 
     319            block.div.style.right = (r != null) ? r + 'px' : '';             
     320            block.div.style.top = (t != null) ? t + 'px' : ''; 
     321 
     322            block.image.style.left = positionBlock.position.x + 'px'; 
     323            block.image.style.top = positionBlock.position.y + 'px'; 
     324        } 
     325 
     326        this.contentDiv.style.left = this.padding.left + "px"; 
     327        this.contentDiv.style.top = this.padding.top + "px"; 
     328    }, 
     329 
     330    CLASS_NAME: "OpenLayers.Popup.Framed" 
     331}); 

  • lib/OpenLayers/Popup/AnchoredBubble.js

    old new  
    3838     */ 
    3939    initialize:function(id, lonlat, size, contentHTML, anchor, closeBox, 
    4040                        closeBoxCallback) { 
     41         
     42        this.padding = new OpenLayers.Bounds( 
     43            0, OpenLayers.Popup.AnchoredBubble.CORNER_SIZE, 
     44            0, OpenLayers.Popup.AnchoredBubble.CORNER_SIZE 
     45        ); 
    4146        OpenLayers.Popup.Anchored.prototype.initialize.apply(this, arguments); 
    4247    }, 
    4348 
    …… 
    6469    }, 
    6570 
    6671    /** 
    67      * Method: moveTo 
    68      * The popup may have been moved to a new relative location, in which case 
     72     * Method: updateRelativePosition 
     73     * The popup has been moved to a new relative location, in which case 
    6974     *     we will want to re-do the rico corners. 
    70      *  
    71      * Parameters: 
    72      * px - {<OpenLayers.Pixel>} 
    7375     */ 
    74     moveTo: function(px) { 
    75         OpenLayers.Popup.Anchored.prototype.moveTo.apply(this, arguments); 
    76         this.setRicoCorners(!this.rounded); 
    77         this.rounded = true; 
     76    updateRelativePosition: function() { 
     77        this.setRicoCorners(); 
    7878    }, 
    7979 
    8080    /** 
    …… 
    8585     */ 
    8686    setSize:function(size) {  
    8787        OpenLayers.Popup.Anchored.prototype.setSize.apply(this, arguments); 
    88          
    89         if (this.contentDiv != null) { 
    9088 
    91             var contentSize = this.size.clone(); 
    92             contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE); 
    93             contentSize.h -= (2 * this.padding); 
    94      
    95             this.contentDiv.style.height = contentSize.h + "px"; 
    96             this.contentDiv.style.width  = contentSize.w + "px"; 
    97              
    98             if (this.map) { 
    99                 //size has changed - must redo corners         
    100                 this.setRicoCorners(!this.rounded); 
    101                 this.rounded = true; 
    102             }     
    103         } 
     89        this.setRicoCorners(); 
    10490    },   
    10591 
    10692    /** 
    …… 
    117103        if (this.div != null) { 
    118104            if (this.contentDiv != null) { 
    119105                this.div.style.background = "transparent"; 
    120                 OpenLayers.Rico.Corner.changeColor(this.contentDiv,  
     106                OpenLayers.Rico.Corner.changeColor(this.groupDiv,  
    121107                                                   this.backgroundColor); 
    122108            } 
    123109        } 
    …… 
    154140    /**  
    155141     * Method: setRicoCorners 
    156142     * Update RICO corners according to the popup's current relative postion. 
    157      *   
    158      * Parameters: 
    159      * firstTime - {Boolean} This the first time the corners are being rounded. 
    160143     */ 
    161     setRicoCorners:function(firstTime) { 
     144    setRicoCorners:function() { 
    162145     
    163146        var corners = this.getCornersToRound(this.relativePosition); 
    164147        var options = {corners: corners, 
    …… 
    166149                       bgColor: "transparent", 
    167150                         blend: false}; 
    168151 
    169         if (firstTime) { 
     152        if (!this.rounded) { 
    170153            OpenLayers.Rico.Corner.round(this.div, options); 
     154            this.rounded = true; 
    171155        } else { 
    172156            OpenLayers.Rico.Corner.reRound(this.groupDiv, options); 
    173157            //set the popup color and opacity 

  • lib/OpenLayers/Popup/Anchored.js

    old new  
    5353                                           offset: new OpenLayers.Pixel(0,0)}; 
    5454    }, 
    5555 
    56     /**  
    57      * Method: draw 
    58      *  
    59      * Parameters: 
    60      * px - {<OpenLayers.Pixel>} 
    61      *  
    62      * Returns:  
    63      * {DOMElement} Reference to a div that contains the drawn popup. 
     56    /** 
     57     * APIMethod: destroy 
    6458     */ 
    65     draw: function(px) { 
    66         if (px == null) { 
    67             if ((this.lonlat != null) && (this.map != null)) { 
    68                 px = this.map.getLayerPxFromLonLat(this.lonlat); 
    69             } 
    70         } 
     59    destroy: function() { 
     60        this.anchor = null; 
     61        this.relativePosition = null; 
    7162         
    72         //calculate relative position 
    73         this.relativePosition = this.calculateRelativePosition(px); 
    74          
    75         return OpenLayers.Popup.prototype.draw.apply(this, arguments); 
     63        OpenLayers.Popup.prototype.destroy.apply(this, arguments);         
    7664    }, 
    77      
    78     /**  
    79      * Method: calculateRelativePosition 
    80      *  
    81      * Parameters: 
    82      * px - {<OpenLayers.Pixel>} 
    83      *  
    84      * Returns: 
    85      * {String} The relative position ("br" "tr" "tl "bl") at which the popup 
    86      *     should be placed. 
     65 
     66    /** 
     67     * APIMethod: show 
     68     * Overridden from Popup since user might hide popup and then show() it  
     69     *     in a new location (meaning we might want to update the relative 
     70     *     position on the show) 
    8771     */ 
    88     calculateRelativePosition:function(px) { 
    89         var lonlat = this.map.getLonLatFromLayerPx(px);         
    90          
    91         var extent = this.map.getExtent(); 
    92         var quadrant = extent.determineQuadrant(lonlat); 
    93          
    94         return OpenLayers.Bounds.oppositeQuadrant(quadrant); 
    95     },  
     72    show: function() { 
     73        this.updatePosition(); 
     74        OpenLayers.Popup.prototype.show.apply(this, arguments); 
     75    }, 
    9676 
    9777    /** 
    9878     * Method: moveTo 
    9979     * Since the popup is moving to a new px, it might need also to be moved 
    100      *     relative to where the marker is. 
     80     *     relative to where the marker is. We first calculate the new  
     81     *     relativePosition, and then we calculate the new px where we will  
     82     *     put the popup, based on the new relative position.  
    10183     *  
     84     *     If the relativePosition has changed, we must also call  
     85     *     updateRelativePosition() to make any visual changes to the popup  
     86     *     which are associated with putting it in a new relativePosition. 
     87     *  
    10288     * Parameters: 
    10389     * px - {<OpenLayers.Pixel>} 
    10490     */ 
    10591    moveTo: function(px) { 
     92        var oldRelativePosition = this.relativePosition; 
    10693        this.relativePosition = this.calculateRelativePosition(px); 
    10794         
    10895        var newPx = this.calculateNewPx(px); 
    10996         
    11097        var newArguments = new Array(newPx);         
    11198        OpenLayers.Popup.prototype.moveTo.apply(this, newArguments); 
     99         
     100        //if this move has caused the popup to change its relative position,  
     101        // we need to make the appropriate cosmetic changes. 
     102        if (this.relativePosition != oldRelativePosition) { 
     103            this.updateRelativePosition(); 
     104        } 
    112105    }, 
    113      
     106 
    114107    /** 
    115      * Method: setSize 
     108     * APIMethod: setSize 
    116109     *  
    117110     * Parameters: 
    118111     * size - {<OpenLayers.Size>} 
    …… 
    127120    },   
    128121     
    129122    /**  
     123     * Method: calculateRelativePosition 
     124     *  
     125     * Parameters: 
     126     * px - {<OpenLayers.Pixel>} 
     127     *  
     128     * Returns: 
     129     * {String} The relative position ("br" "tr" "tl "bl") at which the popup 
     130     *     should be placed. 
     131     */ 
     132    calculateRelativePosition:function(px) { 
     133        var lonlat = this.map.getLonLatFromLayerPx(px);         
     134         
     135        var extent = this.map.getExtent(); 
     136        var quadrant = extent.determineQuadrant(lonlat); 
     137         
     138        return OpenLayers.Bounds.oppositeQuadrant(quadrant); 
     139    },  
     140 
     141    /** 
     142     * Method: updateRelativePosition 
     143     * The popup has been moved to a new relative location, so we may want to  
     144     *     make some cosmetic adjustments to it.  
     145     *  
     146     *     Note that in the classic Anchored popup, there is nothing to do  
     147     *     here, since the popup looks exactly the same in all four positions. 
     148     *     Subclasses such as the AnchoredBubble and Framed, however, will  
     149     *     want to do something special here. 
     150     */ 
     151    updateRelativePosition: function() { 
     152        //to be overridden by subclasses 
     153    }, 
     154 
     155    /**  
    130156     * Method: calculateNewPx 
    131157  &nb