OpenLayers OpenLayers

Changeset 6671

Show
Ignore:
Timestamp:
03/28/08 20:00:01 (10 months ago)
Author:
euzuro
Message:

in the interest of more economical DOM usage, we will reuse the elements we create, instead of making five new ones for each position. overkill, really it was. all we do with each change of position is update each blocks' bits, anyways. So. no more 'frames' nonsense, we just give the popup a 'blocks' array, which is initialized when the popup is opened. Golden. Memory usage going down down down.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/euzuro/pop/lib/OpenLayers/Popup/Framed.js

    r6670 r6671  
    5555     
    5656    /** 
    57      * Property: frames 
    58      * {Object} Hash which directly corresponds to the 'positionBlocks' hash,  
    59      *     but which contains the specific DOM instances for this popup.  
    60      *  
    61      *     The frames hash will contain up to four 'position' hashes (one for 
    62      *     each of "tl", "tr", "bl", "br"). Each positon has will have its  
    63      *     own div, and a 'blocks' property, which is an array of the  
    64      *     individual frame divs. 
    65      */ 
    66     frames: null, 
     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, 
    6765 
    6866    /**  
    …… 
    119117        this.groupDiv.style.height = "100%"; 
    120118        this.groupDiv.style.width = "100%"; 
    121          
    122         this.frames = {}; 
    123119    }, 
    124120 
    …… 
    131127        this.fixedRelativePosition = false; 
    132128     
    133  
    134         var possiblePositions = ['tl', 'tr', 'bl', 'br']; 
    135         for(var i = 0; i < possiblePositions.length; i++) { 
    136             var position = this.frames[possiblePositions[i]]; 
    137             if (position != null) { 
    138                 for(var j = 0; j < position.blocks.length; j++) { 
    139                     var block = position.blocks[j]; 
    140                      
    141                     if (block.image) { 
    142                         block.div.removeChild(block.image); 
    143                     } 
    144                     block.image = null; 
    145                                          
    146                     if (block.div) { 
    147                         position.div.removeChild(block.div); 
    148                     } 
    149                     block.div = null;                                         
    150                 } 
    151                 if (position.div) { 
    152                     this.groupDiv.removeChild(position.div); 
    153                 } 
    154                 position.div = null; 
    155                 delete this.frames[possiblePositions[i]]; 
     129        this.positionBlocks = null; 
     130     
     131        //remove our blocks 
     132        for(var i = 0; i < this.blocks.length; i++) { 
     133            var block = this.blocks[j]; 
     134             
     135            if (block.image) { 
     136                this.groupDiv.removeChild(block.image); 
    156137            } 
    157         } 
    158         this.frames = null; 
     138            block.image = null; 
     139                                 
     140            if (block.div) { 
     141                this.groupDiv.removeChild(block.div); 
     142            } 
     143            block.div = null;                                         
     144        } 
     145        this.blocks = null; 
    159146 
    160147        OpenLayers.Popup.Anchored.prototype.destroy.apply(this, arguments);         
    …… 
    230217        }         
    231218 
    232         this.updateFrames(); 
     219        this.updateBlocks(); 
    233220    }, 
    234221 
    …… 
    254241 
    255242    /** 
    256      * Method: createFrame 
    257      *  
    258      * Parameters: 
    259      * pos - {String} 
    260      *  
    261      * Returns: 
    262      * {Object} Frame entry, with blocks array 
    263      */ 
    264     createFrame: function(pos) { 
    265         var frame  = { 
    266             'blocks': [] 
    267         }; 
    268  
    269         frame.div = OpenLayers.Util.createDiv(pos + "-popup",  
    270             null, null, null, 'relative' 
    271         ); 
    272         frame.div.style.height = '100%'; 
    273         frame.div.style.width = '100%'; 
    274         this.groupDiv.appendChild(frame.div); 
    275  
    276         var position = this.positionBlocks[pos]; 
     243     * Method: createBlocks 
     244     */ 
     245    createBlocks: function() { 
     246        this.blocks = []; 
     247 
     248        var position = this.positionBlocks[this.relativePosition]; 
    277249        for (var i = 0; i < position.blocks.length; i++) { 
    278250 
    279             var fBlock = {}; 
    280             frame.blocks.push(fBlock); 
     251            var block = {}; 
     252            this.blocks.push(block); 
    281253 
    282254            var divId = this.id + '_FrameDecorationDiv_' + i; 
    283             fBlock.div = OpenLayers.Util.createDiv(divId,  
     255            block.div = OpenLayers.Util.createDiv(divId,  
    284256                null, null, null, "absolute", null, "hidden", null 
    285257            ); 
    …… 
    290262                                    : OpenLayers.Util.createImage; 
    291263                 
    292             fBlock.image = imageCreator(imgId,  
     264            block.image = imageCreator(imgId,  
    293265                null, this.imageSize, this.imageSrc,  
    294266                "absolute", null, null, null 
    295267            ); 
    296268 
    297             fBlock.div.appendChild(fBlock.image); 
    298             frame.div.appendChild(fBlock.div); 
    299         } 
    300          
    301         return frame; 
    302     }, 
    303      
    304     /** 
    305      * Method: updateFrames 
     269            block.div.appendChild(block.image); 
     270            this.groupDiv.appendChild(block.div); 
     271        } 
     272    }, 
     273     
     274    /** 
     275     * Method: updateBlocks 
    306276     * Internal method, called on initialize and when the popup's relative 
    307277     *     position has changed. This function takes care of re-positioning 
    308      *     the corresponding popups in their appropropriate places. 
    309      */ 
    310     updateFrames: function() { 
    311  
    312         for (var pos in this.positionBlocks) { 
    313             var position = this.positionBlocks[pos]; 
    314             var frame = this.frames[pos]; 
    315  
    316             if (pos != this.relativePosition) { 
    317                 if (frame) { 
    318                     OpenLayers.Element.hide(frame.div); 
    319                 } 
    320             } else { 
    321                 if (!frame) { 
    322                     frame = this.frames[pos] = this.createFrame(pos); 
    323                 } 
    324                 OpenLayers.Element.show(frame.div); 
    325                  
    326                 for (var i = 0; i < position.blocks.length; i++) { 
    327      
    328                     var block = position.blocks[i]; 
    329                     var fBlock = frame.blocks[i]; 
    330      
    331                     // adjust sizes 
    332                     var l = block.anchor.left; 
    333                     var b = block.anchor.bottom; 
    334                     var r = block.anchor.right; 
    335                     var t = block.anchor.top; 
    336                      
    337                     //note that we use the isNaN() test here because if the  
    338                     // size object is initialized with a "auto" parameter, the  
    339                     // size constructor calls parseFloat() on the string,  
    340                     // which will turn it into NaN 
    341                     // 
    342                     var w = (isNaN(block.size.w)) ? this.size.w - (r + l)  
    343                                                   : block.size.w; 
    344          
    345                     var h = (isNaN(block.size.h)) ? this.size.h - (b + t)  
    346                                                   : block.size.h; 
    347                           
    348                     fBlock.div.style.width = w + 'px'; 
    349                     fBlock.div.style.height = h + 'px'; 
    350          
    351                     fBlock.div.style.left = (l != null) ? l + 'px' : ''; 
    352                     fBlock.div.style.bottom = (b != null) ? b + 'px' : ''; 
    353                     fBlock.div.style.right = (r != null) ? r + 'px' : '';             
    354                     fBlock.div.style.top = (t != null) ? t + 'px' : ''; 
    355                      
    356                     fBlock.image.style.left = block.position.x + 'px'; 
    357                     fBlock.image.style.top = block.position.y + 'px'; 
    358                 } 
    359                  
    360             } 
     278     *     the popup's blocks in their appropropriate places. 
     279     */ 
     280    updateBlocks: function() { 
     281 
     282        if (!this.blocks) { 
     283            this.createBlocks(); 
     284        } 
     285 
     286        var position = this.positionBlocks[this.relativePosition]; 
     287        for (var i = 0; i < position.blocks.length; i++) { 
     288 
     289            var positionBlock = position.blocks[i]; 
     290            var block = this.blocks[i]; 
     291 
     292            // adjust sizes 
     293            var l = positionBlock.anchor.left; 
     294            var b = positionBlock.anchor.bottom; 
     295            var r = positionBlock.anchor.right; 
     296            var t = positionBlock.anchor.top; 
     297             
     298            //note that we use the isNaN() test here because if the  
     299            // size object is initialized with a "auto" parameter, the  
     300            // size constructor calls parseFloat() on the string,  
     301            // which will turn it into NaN 
     302            // 
     303            var w = (isNaN(positionBlock.size.w)) ? this.size.w - (r + l)  
     304                                          : positionBlock.size.w; 
     305 
     306            var h = (isNaN(positionBlock.size.h)) ? this.size.h - (b + t)  
     307                                          : positionBlock.size.h; 
     308                  
     309            block.div.style.width = w + 'px'; 
     310            block.div.style.height = h + 'px'; 
     311 
     312            block.div.style.left = (l != null) ? l + 'px' : ''; 
     313            block.div.style.bottom = (b != null) ? b + 'px' : ''; 
     314            block.div.style.right = (r != null) ? r + 'px' : '';             
     315            block.div.style.top = (t != null) ? t + 'px' : ''; 
     316             
     317            block.image.style.left = positionBlock.position.x + 'px'; 
     318            block.image.style.top = positionBlock.position.y + 'px'; 
    361319        } 
    362320