OpenLayers OpenLayers

Ticket #1292: keyboardsupport.patch

File keyboardsupport.patch, 11.9 kB (added by tcoulter, 5 months ago)

Revamped keyboard support for more browsers.

  • tests/Control/KeyboardDefaults.html

    old new  
    2323                "new OpenLayers.Map creates map" ); 
    2424        map.addControl(control); 
    2525        t.ok( control.map === map, "Control.map is set to the map object" ); 
    26         t.ok( map.controls[3] === control, "map.controls contains control" ); 
     26        t.ok( OpenLayers.Util.indexOf(map.controls, control), "map.controls contains control" ); 
    2727    } 
    2828 
     29    /* When interpretting 
     30     * the keycodes below (including the comments associated with them), 
     31     * consult the URL below. For instance, the Safari browser returns 
     32     * "IE keycodes", and so is supported by any keycode labeled "IE". 
     33     *  
     34     * Very informative URL: 
     35     *    http://unixpapa.com/js/key.html 
     36     */ 
    2937    function test_Control_KeyboardDefaults_KeyDownEvent (t) { 
    30         t.plan( 10 ); 
     38        t.plan( 16 ); 
    3139 
    3240        var evt = {which: 1}; 
    3341        map = new OpenLayers.Map('map'); 
     
    3846        control = new OpenLayers.Control.KeyboardDefaults(); 
    3947        map.addControl(control); 
    4048         
     49        var STARTING_ZOOM_LEVEL = 4; 
     50         
    4151        var centerLL = new OpenLayers.LonLat(0,0); 
    42         map.setCenter(centerLL,4); 
     52        map.setCenter(centerLL, STARTING_ZOOM_LEVEL); 
    4353 
    44  
     54        // Start new test. 
    4555        evt.keyCode = OpenLayers.Event.KEY_LEFT; 
    46         control.defaultKeyDown(evt); 
     56        control.defaultKeyPress(evt); 
    4757        t.delay_call(  
    4858            1, function() { 
    4959                t.ok( map.getCenter().lon < centerLL.lon, "key left works correctly" ); 
     60                 
     61                // Start new test. 
    5062                evt.keyCode = OpenLayers.Event.KEY_RIGHT; 
    51                 control.defaultKeyDown(evt); 
     63                control.defaultKeyPress(evt); 
    5264            }, 
    5365            1, function() { 
    54                 t.ok( map.getCenter().lon == centerLL.lon, "key right works correctly" );  
     66                t.ok( map.getCenter().lon == centerLL.lon, "key right works correctly" ); 
     67                 
     68                // Start new test.  
    5569                evt.keyCode = OpenLayers.Event.KEY_UP; 
    56                 control.defaultKeyDown(evt); 
     70                control.defaultKeyPress(evt); 
    5771            }, 
    5872            1, function() { 
    5973                t.ok( map.getCenter().lat > centerLL.lat, "key up works correctly" );  
     74                 
     75                // Start new test. 
    6076                evt.keyCode = OpenLayers.Event.KEY_DOWN; 
    61                 control.defaultKeyDown(evt); 
     77                control.defaultKeyPress(evt); 
    6278            }, 
    6379            1, function() { 
    6480                t.ok( map.getCenter().lat == centerLL.lat, "key down works correctly" );  
     81                 
     82                // Start new test. 
    6583                evt.keyCode = 33; //page up 
    66                 control.defaultKeyDown(evt); 
     84                control.defaultKeyPress(evt); 
    6785            }, 
    6886            1, function() { 
    6987                t.ok( map.getCenter().lat > centerLL.lat, "key page up works correctly" );  
     88                 
     89                // Start new test. 
    7090                evt.keyCode = 34; //page down 
    71                 control.defaultKeyDown(evt); 
     91                control.defaultKeyPress(evt); 
    7292            }, 
    7393            1, function() { 
    7494                t.ok( map.getCenter().lat == centerLL.lat, "key page down works correctly" );  
     95                 
     96                // Start new test. 
    7597                evt.keyCode = 35; //end 
    76                 control.defaultKeyDown(evt); 
     98                control.defaultKeyPress(evt); 
    7799            }, 
    78100            1, function() { 
    79101                t.ok( map.getCenter().lon > centerLL.lon, "key end works correctly" );  
    80                 evt.keyCode = 36; //pos1 
    81                 control.defaultKeyDown(evt); 
     102                 
     103                // Start new test. 
     104                evt.keyCode = 36; //home 
     105                control.defaultKeyPress(evt); 
    82106            }, 
    83107            1, function() { 
    84                 t.ok( map.getCenter().lon == centerLL.lon, "key pos1 works correctly" );  
    85                 evt.charCode = 43; //+ 
    86                 control.defaultKeyDown(evt); 
    87             }, 
    88             1, function() { 
    89                 t.eq( map.getZoom(), 5, "key + works correctly" );  
     108                t.ok( map.getCenter().lon == centerLL.lon, "key home works correctly");  
     109                 
     110                // Start new test. 
     111                evt.keyCode = 43; //+ 
     112                control.defaultKeyPress(evt); 
     113                t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 1, "key code 43 works correctly: +/= key (ASCII), keypad + (ASCII, Opera)" ); 
     114                 
     115                // Start new test.  
     116                evt.keyCode = 61; 
     117                control.defaultKeyPress(evt); 
     118                t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 2, "key code 61 works correctly: +/= key (Mozilla, Opera, some ASCII)");  
     119                 
     120                // Start new test. 
     121                evt.keyCode = 187; 
     122                control.defaultKeyPress(evt); 
     123                t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 3, "key code 187 works correctly: +/= key (IE)");  
     124                 
     125                // Start new test. 
     126                evt.keyCode = 107;  
     127                control.defaultKeyPress(evt); 
     128                t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 4, "key code 107 works correctly: keypad + (IE, Mozilla)");  
     129                 
     130                // Start new test. 
    90131                // set zoomanimation flag manually, 
    91132                // reason: loadend event in layers.js will not achieved in unittests 
    92133                map.zoomanimationActive = false; 
    93                 evt.charCode = 45; //- 
    94                 control.defaultKeyDown(evt); 
    95             }, 
    96             1, function() { 
    97                 t.eq( map.getZoom(), 4, "key - works correctly" );  
     134                evt.keyCode = 45;  
     135                control.defaultKeyPress(evt); 
     136                t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 3, "key code 45 works correctly: -/_ key (ASCII, Opera), keypad - (ASCII, Opera)"); 
     137                 
     138                // Start new test.  
     139                // set zoomanimation flag manually, 
     140                // reason: loadend event in layers.js will not achieved in unittests 
     141                map.zoomanimationActive = false; 
     142                evt.keyCode = 109;  
     143                control.defaultKeyPress(evt); 
     144                t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 2, "key code 109 works correctly: -/_ key (Mozilla), keypad - (Mozilla, IE)");  
     145                 
     146                // Start new test. 
     147                // set zoomanimation flag manually, 
     148                // reason: loadend event in layers.js will not achieved in unittests 
     149                map.zoomanimationActive = false; 
     150                evt.keyCode = 189;  
     151                control.defaultKeyPress(evt); 
     152                t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 1, "key code 189 works correctly: -/_ key (IE)");  
     153                 
     154                // Start new test. 
     155                // set zoomanimation flag manually, 
     156                // reason: loadend event in layers.js will not achieved in unittests 
     157                map.zoomanimationActive = false; 
     158                evt.keyCode = 95; 
     159                control.defaultKeyPress(evt); 
     160                t.eq( map.getZoom(), STARTING_ZOOM_LEVEL, "key code 95 works correctly: -/_ key (some ASCII)");  
    98161            } 
    99162        ); 
    100163    } 
  • tests/list-tests.html

    old new  
    9191    <li>Control/DragFeature.html</li> 
    9292    <li>Control/DragPan.html</li> 
    9393    <li>Control/DrawFeature.html</li> 
     94    <li>Control/KeyboardDefaults.html</li> 
    9495    <li>Control/LayerSwitcher.html</li> 
    9596    <li>Control/ModifyFeature.html</li> 
    9697    <li>Control/MousePosition.html</li> 
  • lib/OpenLayers/Control/KeyboardDefaults.js

    old new  
    4747     */ 
    4848    draw: function() { 
    4949        this.handler = new OpenLayers.Handler.Keyboard( this, {  
    50                                 "keypress": this.defaultKeyPress }); 
     50                                "keydown": this.defaultKeyPress }); 
    5151        this.activate(); 
    5252    }, 
    5353     
    5454    /** 
    5555     * Method: defaultKeyPress 
     56     * When handling the key event, we only use evt.keyCode. This holds  
     57     * some drawbacks, though we get around them below. When interpretting 
     58     * the keycodes below (including the comments associated with them), 
     59     * consult the URL below. For instance, the Safari browser returns 
     60     * "IE keycodes", and so is supported by any keycode labeled "IE". 
     61     *  
     62     * Very informative URL: 
     63     *    http://unixpapa.com/js/key.html 
    5664     * 
    5765     * Parameters: 
    5866     * code - {Integer}  
    5967     */ 
    60     defaultKeyPress: function (code) { 
    61         switch(code) { 
     68    defaultKeyPress: function (evt) { 
     69        switch(evt.keyCode) { 
    6270            case OpenLayers.Event.KEY_LEFT: 
    6371                this.map.pan(-this.slideFactor, 0); 
    6472                break; 
     
    7280                this.map.pan(0, this.slideFactor); 
    7381                break; 
    7482             
    75             case 33: // Page Up   
     83            case 33: // Page Up. Same in all browsers. 
    7684                var size = this.map.getSize(); 
    7785                this.map.pan(0, -0.75*size.h); 
    7886                break; 
    79             case 34: // Page Down   
     87            case 34: // Page Down. Same in all browsers. 
    8088                var size = this.map.getSize(); 
    8189                this.map.pan(0, 0.75*size.h); 
    8290                break;  
    83             case 35: // End   
     91            case 35: // End. Same in all browsers. 
    8492                var size = this.map.getSize(); 
    8593                this.map.pan(0.75*size.w, 0); 
    8694                break;  
    87             case 36: // Pos1   
     95            case 36: // Home. Same in all browsers. 
    8896                var size = this.map.getSize(); 
    8997                this.map.pan(-0.75*size.w, 0); 
    9098                break;  
    9199 
    92             case 43: // +  
     100            case 43:  // +/= (ASCII), keypad + (ASCII, Opera) 
     101            case 61:  // +/= (Mozilla, Opera, some ASCII) 
     102            case 187: // +/= (IE) 
     103            case 107: // keypad + (IE, Mozilla) 
    93104                this.map.zoomIn(); 
    94105                break;  
    95             case 45: // -  
     106            case 45:  // -/_ (ASCII, Opera), keypad - (ASCII, Opera) 
     107            case 109: // -/_ (Mozilla), keypad - (Mozilla, IE) 
     108            case 189: // -/_ (IE) 
     109            case 95:  // -/_ (some ASCII) 
    96110                this.map.zoomOut(); 
    97111                break;  
    98             case 107: // + (IE only) 
    99                 this.map.zoomIn(); 
    100                 break; 
    101             case 109: // - (IE only) 
    102                 this.map.zoomOut(); 
    103                 break; 
    104112        }  
    105113    }, 
    106114 
  • lib/OpenLayers/Control/ModifyFeature.js

    old new  
    226226 
    227227        // configure the keyboard handler 
    228228        var keyboardOptions = { 
    229             keypress: this.handleKeypress 
     229            keydown: this.handleKeypress 
    230230        }; 
    231231        this.handlers = { 
    232232            keyboard: new OpenLayers.Handler.Keyboard(this, keyboardOptions) 
  • lib/OpenLayers/Handler/Keyboard.js

    old new  
    100100     */ 
    101101    handleKeyEvent: function (evt) { 
    102102        if (this.checkModifiers(evt)) { 
    103             this.callback(evt.type, [evt.charCode || evt.keyCode]); 
     103            this.callback(evt.type, [evt]); 
    104104        } 
    105105    }, 
    106106