OpenLayers OpenLayers

Changeset 5675

Show
Ignore:
Timestamp:
01/07/08 18:28:25 (1 year ago)
Author:
tschaub
Message:

Making the history control a meta-control with dependent previous and next controls. These dependent controls behave as normal button controls.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/tschaub/history/examples/navigation-history.html

    r5672 r5675  
    2424                map.zoomToMaxExtent(); 
    2525 
    26                 nav = new OpenLayers.Control.NavigationHistory(); 
    27                 map.addControl(nav); 
    28                  
    29                 prev = new OpenLayers.Control({ 
    30                     type: OpenLayers.Control.BUTTON, 
    31                     trigger: function() {nav.previous();}, 
    32                 }); 
    33                 nav.onPreviousChange = function(state, length) { 
    34                     if(state) { 
    35                         prev.activate(); 
     26                // set any application specific behavior here 
     27                var previousOptions = { 
     28                    onActivate: function() { 
    3629                        document.getElementById("previous").disabled = false; 
    37                     } else { 
    38                         prev.deactivate(); 
     30                    }, 
     31                    onDeactivate: function() { 
    3932                        document.getElementById("previous").disabled = true; 
    4033                    } 
    41                     OpenLayers.Console.log( 
    42                         length + " items remaining in previous history" 
    43                     ); 
    44                 }                         
    45                 map.addControl(prev); 
    46                  
    47                 next = new OpenLayers.Control({ 
    48                     type: OpenLayers.Control.BUTTON, 
    49                     trigger: function() {nav.next();} 
    50                 }); 
    51                 nav.onNextChange = function(state, length) { 
    52                     if(state) { 
    53                         next.activate(); 
     34                }; 
     35                var nextOptions = { 
     36                    onActivate: function() { 
    5437                        document.getElementById("next").disabled = false; 
    55                     } else { 
    56                         next.deactivate(); 
     38                    }, 
     39                    onDeactivate: function() { 
    5740                        document.getElementById("next").disabled = true; 
    5841                    } 
    59                     OpenLayers.Console.log( 
    60                         length + " items remaining in next history" 
    61                     ); 
    62                 } 
    63                 map.addControl(next); 
     42                }; 
     43                var options = { 
     44                    previousOptions: previousOptions, 
     45                    nextOptions: nextOptions 
     46                }; 
     47                nav = new OpenLayers.Control.NavigationHistory(options); 
     48 
     49                map.addControl(nav); 
    6450 
    6551            } 
    …… 
    7763 
    7864        <div id="map"></div> 
    79         zoom to <button onclick="prev.trigger();" id="previous" disabled="disabled">previous</button> 
    80         <button onclick="next.trigger();" id="next" disabled="disabled">next</button><br /> 
    81  
     65        zoom to 
     66        <button onclick="nav.previous.trigger();" 
     67                id="previous" 
     68                disabled="disabled"> 
     69            previous 
     70        </button> 
     71        <button onclick="nav.next.trigger();" 
     72                id="next" 
     73                disabled="disabled"> 
     74            next 
     75        </button> 
     76         
    8277        <div id="docs"></div> 
    8378    </body> 

  • sandbox/tschaub/history/lib/OpenLayers/Control/NavigationHistory.js

    r5672 r5675  
    99/** 
    1010 * Class: OpenLayers.Control.NavigationHistory 
    11  * A navigation history control. 
     11 * A navigation history control.  This is a meta-control, that creates two 
     12 *     dependent controls: <previous> and <next>.  Call the trigger method 
     13 *     on the <previous> and <next> controls to restore previous and next 
     14 *     history states.  The previous and next controls will become active 
     15 *     when there are available states to restore and will become deactive 
     16 *     when there are no states to restore. 
    1217 * 
    1318 * Inherits from: 
    …… 
    1722 
    1823    /** 
    19      * APIProperty: type 
    20      * OpenLayers.Control.TYPE_BUTTON 
    21      */ 
    22     type: OpenLayers.Control.TYPE_BUTTON, 
     24     * APIProperty: previous 
     25     * {OpenLayers.Control} A button type control whose trigger method restores 
     26     *     the previous state managed by this control. 
     27     */ 
     28    previous: null, 
     29     
     30    /** 
     31     * APIProperty: previousOptions 
     32     * {Object} Set this property on the options argument of the constructor 
     33     *     to set optional properties on the <previous> control. 
     34     */ 
     35    previousOptions: null, 
     36     
     37    /** 
     38     * APIProperty: next 
     39     * {OpenLayers.Control} A button type control whose trigger method restores 
     40     *     the next state managed by this control. 
     41     */ 
     42    next: null, 
     43 
     44    /** 
     45     * APIProperty: nextOptions 
     46     * {Object} Set this property on the options argument of the constructor 
     47     *     to set optional properties on the <next> control. 
     48     */ 
     49    nextOptions: null, 
    2350 
    2451    /** 
    …… 
    2855     */ 
    2956    limit: 50, 
    30      
    31     /** 
    32      * APIProperty: backwards 
    33      * {Boolean} Navigate backwards through history by default.  This is 
    34      *     relevant when the <trigger> method is called.  If true, the 
    35      *     <trigger> method will call <previous>.  If false, the <trigger> 
    36      *     method will call <next>.  Default is true. 
    37      */ 
    38     backwards: true, 
    3957 
    4058    /** 
    …… 
    111129        OpenLayers.Control.prototype.initialize.apply(this, [options]); 
    112130        this.clear(); 
    113     }, 
    114      
    115     /** 
    116      * APIMethod: onPreviousChange 
    117      * Called when the previous history stack changes.  This function will 
    118      *     be called with two arguments, the state ({Object}) that will be 
    119      *     restored if previous is called and the number ({Integer}) of items 
    120      *     remaining in the previous history. 
    121      */ 
    122     onPreviousChange: function(state, length) {}, 
    123      
    124     /** 
    125      * APIMethod: onNextChange 
    126      * Called when the next history stack changes.  This function will 
    127      *     be called with two arguments, the state ({Object}) that will be 
    128      *     restored if next is called and the number ({Integer}) of items 
    129      *     remaining in the next history. 
    130      */ 
    131     onNextChange: function(state, length) {}, 
     131 
     132        var previousOptions = { 
     133            type: OpenLayers.Control.BUTTON, 
     134            trigger: OpenLayers.Function.bind(this.previousTrigger, this), 
     135            displayClass: this.displayClass + "Previous", 
     136            onActivate: function() {}, 
     137            onDeactivate: function() {} 
     138        }; 
     139        if(options) { 
     140            OpenLayers.Util.extend(previousOptions, options.previousOptions); 
     141        } 
     142        this.previous = new OpenLayers.Control(previousOptions); 
     143         
     144        var nextOptions = { 
     145            type: OpenLayers.Control.BUTTON, 
     146            trigger: OpenLayers.Function.bind(this.nextTrigger, this), 
     147            displayClass: this.displayClass + "Next", 
     148            onActivate: function() {}, 
     149            onDeactivate: function() {} 
     150        }; 
     151        if(options) { 
     152            OpenLayers.Util.extend(nextOptions, options.nextOptions); 
     153        } 
     154        this.next = new OpenLayers.Control(nextOptions); 
     155 
     156    }, 
     157     
     158    /** 
     159     * Method: onPreviousChange 
     160     * Called when the previous history stack changes. 
     161     * 
     162     * Parameters: 
     163     * state - {Object} An object representing the state to be restored 
     164     *     if previous is triggered again or null if no previous states remain. 
     165     * length - {Integer} The number of remaining previous states that can 
     166     *     be restored. 
     167     */ 
     168    onPreviousChange: function(state, length) { 
     169        if(state && !this.previous.active) { 
     170            this.previous.activate(); 
     171            this.previous.onActivate(); 
     172        } else if(!state && this.previous.active) { 
     173            this.previous.deactivate(); 
     174            this.previous.onDeactivate(); 
     175        } 
     176    }, 
     177     
     178    /** 
     179     * Method: onNextChange 
     180     * Called when the next history stack changes. 
     181     * 
     182     * Parameters: 
     183     * state - {Object} An object representing the state to be restored 
     184     *     if next is triggered again or null if no next states remain. 
     185     * length - {Integer} The number of remaining next states that can 
     186     *     be restored. 
     187     */ 
     188    onNextChange: function(state, length) { 
     189        if(state && !this.next.active) { 
     190            this.next.activate(); 
     191            this.next.onActivate(); 
     192        } else if(!state && this.next.active) { 
     193            this.next.deactivate(); 
     194            this.next.onDeactivate(); 
     195        } 
     196    }, 
    132197     
    133198    /** 
    …… 
    137202    destroy: function() { 
    138203        OpenLayers.Control.prototype.destroy.apply(this); 
     204        this.previous.destroy(); 
     205        this.next.destroy(); 
    139206        this.deactivate(); 
    140207        for(var prop in this) { 
    …… 
    143210    }, 
    144211     
     212    /**  
     213     * Method: setMap 
     214     * Set the map property for the control and <previous> and <next> child 
     215     *     controls. 
     216     * 
     217     * Parameters: 
     218     * map - {<OpenLayers.Map>}  
     219     */ 
     220    setMap: function(map) { 
     221        this.map = map; 
     222        this.next.setMap(map); 
     223        this.previous.setMap(map); 
     224    }, 
     225 
    145226    /** 
    146227     * Method: draw 
    …… 
    149230    draw: function() { 
    150231        OpenLayers.Control.prototype.draw.apply(this, arguments); 
     232        this.next.draw(); 
     233        this.previous.draw(); 
    151234        if(this.activateOnDraw) { 
    152235            this.activate(); 
    …… 
    155238     
    156239    /** 
    157      * APIMethod: trigger 
    158      * Trigger the default action on the control.  If <backwards> is true, this 
    159      *     will call <previous>.  If <backwards> is false, this will call 
    160      *     <next>. 
    161      * 
    162      * Parameters: 
    163      * options - {Object} Optional object to modify trigger behavior.  An 
    164      *     opposite property on the options object will cause previous to be 
    165      *     called instead of next. 
    166      */ 
    167     trigger: function(options) { 
    168         var backwards = (options.opposite) ? !this.backwards : this.backwards; 
    169         if(backwards) { 
    170             this.previous(); 
    171         } else { 
    172             this.next(); 
    173         } 
    174     }, 
    175      
    176     /** 
    177      * APIMethod: previous 
     240     * Method: previousTrigger 
    178241     * Restore the previous state.  If no items are in the previous history 
    179242     *     stack, this has no effect. 
    …… 
    183246     *     items are in the previous history stack. 
    184247     */ 
    185     previous: function() { 
     248    previousTrigger: function() { 
    186249        var current = this.previousStack.shift(); 
    187250        var state = this.previousStack.shift(); 
    …… 
    203266     
    204267    /** 
    205      * APIMethod: next 
     268     * APIMethod: nextTrigger 
    206269     * Restore the next state.  If no items are in the next history 
    207270     *     stack, this has no effect.  The next history stack is populated 
    …… 
    212275     *     items are in the next history stack. 
    213276     */ 
    214     next: function() { 
     277    nextTrigger: function() { 
    215278        var state = this.nextStack.shift(); 
    216279        if(state != undefined) {