OpenLayers OpenLayers

Changeset 349

Show
Ignore:
Timestamp:
05/24/06 22:27:29 (3 years ago)
Author:
euzuro
Message:

Add AnchoredBubble.js, include it in dynamic load, add a bit of demo test.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/openlayers/examples/popups.html

    r337 r349  
    2828        function changer() { 
    2929            popup.setBackgroundColor("red"); 
    30             popup.setSize(new OpenLayers.Size(200,20)); 
    31             popup.moveTo(new OpenLayers.Pixel(120,120)); 
    32             popup.setOpacity(.9); 
     30            popup.setSize(new OpenLayers.Size(100,600)); 
     31//            popup.moveTo(new OpenLayers.Pixel(120,120)); 
     32//            popup.setOpacity(.5); 
    3333            popup.setBorder("2px solid");     
    3434            popup.setContentHTML("High Chickens");             
    …… 
    5353        }         
    5454         
     55        function addAnchorBubble() { 
     56            popup = new OpenLayers.Popup.AnchoredBubble("chicken",  
     57                                         new OpenLayers.LonLat(5,40), 
     58                                         new OpenLayers.Size(200,200), 
     59                                         "example popup"); 
     60         
     61            popup.setBackgroundColor("yellow"); 
     62            popup.setOpacity(0.7); 
     63            map.addPopup(popup); 
     64        }         
    5565        function destroy() { 
    5666            popup.destroy(); 
    …… 
    6676  </head> 
    6777  <body onload="init()"> 
    68     <h1>OpenLayers Example</h1> 
    6978    <div id="map"></div> 
    70     <div style="background-color:purple" onclick="add()"> click to add popup to map</div> 
     79    <div style="background-color:purple" onclick="add()"> click to add Popup to map</div> 
     80    <div style="background-color:green" onclick="addAnchor()"> click to add an Popup.Anchored</div> 
     81    <div style="background-color:orange" onclick="addAnchorBubble()"> click to add Popup.AnchoredBubble</div> 
    7182    <div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div> 
    72     <div style="background-color:red" onclick="addAnchor()"> click to add an anchored popup</div> 
    73     <div style="background-color:green" onclick="remove()"> click to remove the popup from map</div> 
     83    <div style="background-color:red" onclick="remove()"> click to remove the popup from map</div> 
    7484  </body> 
    7585</html> 

  • trunk/openlayers/lib/OpenLayers.js

    r337 r349  
    5555        "OpenLayers/Layer/WFS.js", 
    5656        "OpenLayers/Popup/Anchored.js", 
     57        "OpenLayers/Popup/AnchoredBubble.js", 
    5758        "OpenLayers/Control.js", 
    5859        "OpenLayers/Control/MouseDefaults.js", 

  • trunk/openlayers/lib/OpenLayers/Popup/AnchoredBubble.js

    r337 r349  
    1 // @require: OpenLayers/Util.js 
     1// @require: OpenLayers/Popup/Anchored.js 
    22 
    33/** 
    44* @class 
    55*/ 
    6 OpenLayers.Popup.Anchored = Class.create(); 
    7 OpenLayers.Popup.Anchored.prototype = 
    8    Object.extend( new OpenLayers.Popup(), { 
     6OpenLayers.Popup.AnchoredBubble = Class.create(); 
    97 
    10     /** "lr", "ll", "tr", "tl" - relative position of the popup. 
    11      * @type String */ 
    12     relativePosition: null, 
     8//Border space for the rico corners 
     9OpenLayers.Popup.AnchoredBubble.CORNER_SIZE = 5; 
    1310 
    14     /** @type OpenLayers.Size */ 
    15     anchorSize: null, 
     11OpenLayers.Popup.AnchoredBubble.prototype = 
     12   Object.extend( new OpenLayers.Popup.Anchored(), { 
    1613 
     14    /** @type DOMElement */ 
     15    contentDiv:null, 
     16 
     17     
    1718    /**  
    1819    * @constructor 
    …… 
    2425    */ 
    2526    initialize:function(id, lonlat, size, contentHTML, anchorSize) { 
    26  
    27         var newArguments = new Array(id, lonlat, size, contentHTML); 
    28         OpenLayers.Popup.prototype.initialize.apply(this, newArguments); 
    29  
    30         this.anchorSize = (anchorSize != null) ? anchorSize  
    31                                                : new OpenLayers.Size(0,0); 
    32          
     27        OpenLayers.Popup.Anchored.prototype.initialize.apply(this, arguments); 
    3328    }, 
    34  
    35     /**  
    36     */ 
    37     destroy: function() { 
    38         OpenLayers.Popup.prototype.destroy.apply(this, arguments); 
    39     }, 
    40  
    4129 
    4230    /**  
    …… 
    4836    draw: function(px) { 
    4937         
    50         //calculate relative position 
    51         this.relativePosition = this.calculateRelativePosition(px); 
     38        OpenLayers.Popup.Anchored.prototype.draw.apply(this, arguments); 
     39 
     40        // make the content Div 
     41        var contentSize = this.size.copyOf(); 
     42        contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE); 
     43 
     44        this.contentDiv = OpenLayers.Util.createDiv( 
     45                                        this.div.id + "-contentDiv",  
     46                                        null, 
     47                                        contentSize,  
     48                                        "auto", 
     49                                        null,  
     50                                        "relative"); 
     51                                         
     52        this.div.appendChild(this.contentDiv); 
     53        this.setContentHTML(); 
    5254         
    53         return OpenLayers.Popup.prototype.draw.apply(this, arguments); 
     55        this.setRicoCorners(true); 
     56         
     57        //set the popup color and opacity            
     58        this.setBackgroundColor();  
     59        this.setOpacity(); 
     60 
     61        return this.div; 
     62    }, 
     63 
     64    /** 
     65    * @param {OpenLayers.Size} size 
     66    */ 
     67    setSize:function(size) {  
     68        OpenLayers.Popup.Anchored.prototype.setSize.apply(this, arguments); 
     69         
     70        if (this.contentDiv != null) { 
     71 
     72            var contentSize = this.size.copyOf(); 
     73            contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE); 
     74     
     75            this.contentDiv.style.height = contentSize.h + "px"; 
     76             
     77            //size has changed - must redo corners         
     78            this.setRicoCorners(false); 
     79        } 
     80    },   
     81 
     82    /** 
     83     * @param {String} color 
     84     */ 
     85    setBackgroundColor:function(color) {  
     86        if (color != undefined) { 
     87            this.backgroundColor = color;  
     88        } 
     89         
     90        if (this.div != null) { 
     91            if (this.contentDiv != null) { 
     92                this.div.style.background = "transparent"; 
     93                Rico.Corner.changeColor(this.contentDiv, this.backgroundColor); 
     94            } 
     95        }        
     96    },   
     97     
     98    /** 
     99     * @param {float} opacity 
     100     */ 
     101    setOpacity:function(opacity) {  
     102        if (opacity != undefined) { 
     103            this.opacity = opacity;  
     104        } 
     105         
     106        if (this.div != null) { 
     107            if (this.contentDiv != null) { 
     108            Rico.Corner.changeOpacity(this.contentDiv, this.opacity); 
     109            }        
     110        } 
     111    },   
     112  
     113    /** Bubble Popups can not have a border 
     114     *  
     115     * @param {int} border 
     116     */ 
     117    setBorder:function(border) {  
     118        this.border = 0; 
     119    },       
     120  
     121    /** 
     122     * @param {String} contentHTML 
     123     */ 
     124    setContentHTML:function(contentHTML) { 
     125        if (contentHTML != null) { 
     126            this.contentHTML = contentHTML; 
     127        } 
     128         
     129        if (this.contentDiv != null) { 
     130            this.contentDiv.innerHTML = this.contentHTML; 
     131        }     
    54132    }, 
    55133     
    56134    /**  
    57     * @param {OpenLayers.Pixel} px 
    58     *  
    59     * @returns The relative position ("br" "tr" "tl "bl") at which the popup 
    60     *           should be placed 
    61     * @type String 
    62     */ 
    63     calculateRelativePosition:function(px) { 
    64         var lonlat = this.map.getLonLatFromLayerPx(px);         
    65          
    66         var extent = this.map.getExtent(); 
    67         var quadrant = extent.determineQuadrant(lonlat); 
    68          
    69         return this.oppositeQuadrant(quadrant); 
    70     },  
     135     * @private 
     136     *  
     137     * @param {Boolean} firstTime Is this the first time the corners are being 
     138     *                             rounded? 
     139     *  
     140     * update the rico corners according to the popup's 
     141     * current relative postion  
     142     */ 
     143    setRicoCorners:function(firstTime) { 
     144     
     145        var corners = this.getCornersToRound(this.relativePosition); 
     146        var options = {corners: corners, 
     147                         color: this.backgroundColor, 
     148                       bgColor: "transparent", 
     149                         blend: false}; 
    71150 
    72     /** 
    73     * @param {OpenLayers.Pixel} px 
    74     */ 
    75     moveTo: function(px) { 
    76          
    77         var newPx = this.calculateNewPx(px); 
    78          
    79         var newArguments = new Array(newPx);         
    80         OpenLayers.Popup.prototype.moveTo.apply(this, newArguments); 
    81     }, 
    82      
    83     /**  
    84      * @param {OpenLayers.Pixel} px 
    85      *  
    86      * @returns The the new px position of the popup on the screen 
    87      *           relative to the passed-in px 
    88      * @type OpenLayers.Pixel 
    89      */ 
    90     calculateNewPx:function(px) { 
    91  
    92         var newPx = px.copyOf(); 
    93  
    94         var top = (this.relativePosition.charAt(0) == 't'); 
    95         newPx.y += (top) ? -this.size.h : this.anchorSize.h; 
    96          
    97         var left = (this.relativePosition.charAt(1) == 'l'); 
    98         newPx.x += (left) ? -this.size.w : this.anchorSize.w; 
    99  
    100         return newPx;    
     151        if (firstTime) { 
     152            Rico.Corner.round(this.div, options); 
     153        } else { 
     154            Rico.Corner.reRound(this.contentDiv, options); 
     155            //set the popup color and opacity            
     156            this.setBackgroundColor();  
     157            this.setOpacity(); 
     158        } 
    101159    }, 
    102160 
    103     /** 
    104      * @param {String} quadrant  
     161    /**  
     162     * @private 
    105163     *  
    106      * @returns The opposing quadrant ("br" "tr" "tl" "bl"). For Example, if  
    107      *           you pass in "bl" it returns "tr", if you pass in "br" it  
    108      *           returns "tl", etc. 
     164     * @returns The proper corners string ("tr tl bl br") for rico 
     165     *           to round 
    109166     * @type String 
    110167     */ 
    111     oppositeQuadrant: function(quadrant) { 
    112         var opp = ""; 
    113          
    114         opp += (quadrant.charAt(0) == 't') ? 'b' : 't'; 
    115         opp += (quadrant.charAt(1) == 'l') ? 'r' : 'l'; 
    116          
    117         return opp; 
     168    getCornersToRound:function() { 
     169 
     170        var corners = ['tl', 'tr', 'bl', 'br']; 
     171 
     172        //we want to round all the corners _except_ the opposite one.  
     173        var corner = OpenLayers.Bounds.oppositeQuadrant(this.relativePosition); 
     174        corners.remove(corner); 
     175 
     176        return corners.join(" "); 
    118177    }, 
    119178 
    120     CLASS_NAME: "OpenLayers.Popup.Anchored" 
     179    CLASS_NAME: "OpenLayers.Popup.AnchoredBubble" 
    121180});