ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

* Fixes to the Keyboard Handler to make it work better --

Browse Source 
* drop keypress event (not used, registers as keydown in IE< which results
      in double events) 
    * return evt instead of evt.keyCode || evt.charCode, so apps can do
      whatever they like best
 * adjust ModifyFeature to new API
 * Adjust KeyboardDefaults to new API, and include a new set of keyCodes
    in switch statement to catch more cases
 * Include keyboard defaults test in list-tests.

Patch from tcoulter, work from Pedro Simonetti (See #1108), Paul Spencer,
myself. r=pagameba,me (Closes #1292)   


git-svn-id: http://svn.openlayers.org/trunk/openlayers@7644 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
2008-07-31 17:45:16 +00:00
parent 3dcc30a24c
commit 09b4073636
6 changed files with 135 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
lib/OpenLayers/Control/KeyboardDefaults.js
View File

@@ -47,18 +47,26 @@ OpenLayers.Control.KeyboardDefaults = OpenLayers.Class(OpenLayers.Control, {
*/
draw: function() {
this.handler = new OpenLayers.Handler.Keyboard( this, {
"keypress": this.defaultKeyPress });
"keydown": this.defaultKeyPress });
this.activate();
},
/**
* Method: defaultKeyPress
* When handling the key event, we only use evt.keyCode. This holds
* some drawbacks, though we get around them below. When interpretting
* the keycodes below (including the comments associated with them),
* consult the URL below. For instance, the Safari browser returns
* "IE keycodes", and so is supported by any keycode labeled "IE".
*
* Very informative URL:
* http://unixpapa.com/js/key.html
*
* Parameters:
* code - {Integer}
*/
defaultKeyPress: function (code) {
switch(code) {
defaultKeyPress: function (evt) {
switch(evt.keyCode) {
case OpenLayers.Event.KEY_LEFT:
this.map.pan(-this.slideFactor, 0);
break;
@@ -72,33 +80,33 @@ OpenLayers.Control.KeyboardDefaults = OpenLayers.Class(OpenLayers.Control, {
this.map.pan(0, this.slideFactor);
break;
case 33: // Page Up
case 33: // Page Up. Same in all browsers.
var size = this.map.getSize();
this.map.pan(0, -0.75*size.h);
break;
case 34: // Page Down
case 34: // Page Down. Same in all browsers.
var size = this.map.getSize();
this.map.pan(0, 0.75*size.h);
break;
case 35: // End
case 35: // End. Same in all browsers.
var size = this.map.getSize();
this.map.pan(0.75*size.w, 0);
break;
case 36: // Pos1
case 36: // Home. Same in all browsers.
var size = this.map.getSize();
this.map.pan(-0.75*size.w, 0);
break;
case 43: // +
case 43: // +/= (ASCII), keypad + (ASCII, Opera)
case 61: // +/= (Mozilla, Opera, some ASCII)
case 187: // +/= (IE)
case 107: // keypad + (IE, Mozilla)
this.map.zoomIn();
break;
case 45: // -
this.map.zoomOut();
break;
case 107: // + (IE only)
this.map.zoomIn();
break;
case 109: // - (IE only)
case 45: // -/_ (ASCII, Opera), keypad - (ASCII, Opera)
case 109: // -/_ (Mozilla), keypad - (Mozilla, IE)
case 189: // -/_ (IE)
case 95: // -/_ (some ASCII)
this.map.zoomOut();
break;
}

10
lib/OpenLayers/Control/ModifyFeature.js
View File

@@ -93,7 +93,7 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
* {Array(Integer)} Keycodes for deleting verticies. Set to null to disable
* vertex deltion by keypress. If non-null, keypresses with codes
* in this array will delete vertices under the mouse. Default
* is 46 and 100, the 'delete' and lowercase 'd' keys.
* is 46 and 68, the 'delete' and lowercase 'd' keys.
*/
deleteCodes: null,
@@ -183,7 +183,7 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
this.layer.style || this.layer.styleMap.createSymbolizer());
this.virtualStyle.fillOpacity = 0.3;
this.virtualStyle.strokeOpacity = 0.3;
this.deleteCodes = [46, 100];
this.deleteCodes = [46, 68];
this.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
OpenLayers.Control.prototype.initialize.apply(this, [options]);
if(!(this.deleteCodes instanceof Array)) {
@@ -227,7 +227,7 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
// configure the keyboard handler
var keyboardOptions = {
keypress: this.handleKeypress
keydown: this.handleKeypress
};
this.handlers = {
keyboard: new OpenLayers.Handler.Keyboard(this, keyboardOptions)
@@ -517,7 +517,9 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
* Parameters:
* {Integer} Key code corresponding to the keypress event.
*/
handleKeypress: function(code) {
handleKeypress: function(evt) {
var code = evt.keyCode;
// check for delete key
if(this.feature &&
OpenLayers.Util.indexOf(this.deleteCodes, code) != -1) {

8
lib/OpenLayers/Handler/Keyboard.js
View File

@@ -24,7 +24,7 @@ OpenLayers.Handler.Keyboard = OpenLayers.Class(OpenLayers.Handler, {
* Constant: KEY_EVENTS
* keydown, keypress, keyup
*/
KEY_EVENTS: ["keydown", "keypress", "keyup"],
KEY_EVENTS: ["keydown", "keyup"],
/**
* Property: eventListener
@@ -72,7 +72,7 @@ OpenLayers.Handler.Keyboard = OpenLayers.Class(OpenLayers.Handler, {
if (OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) {
OpenLayers.Event.observe(
window, this.KEY_EVENTS[i], this.eventListener);
document, this.KEY_EVENTS[i], this.eventListener);
}
return true;
} else {
@@ -88,7 +88,7 @@ OpenLayers.Handler.Keyboard = OpenLayers.Class(OpenLayers.Handler, {
if (OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) {
OpenLayers.Event.stopObserving(
window, this.KEY_EVENTS[i], this.eventListener);
document, this.KEY_EVENTS[i], this.eventListener);
}
deactivated = true;
}
@@ -100,7 +100,7 @@ OpenLayers.Handler.Keyboard = OpenLayers.Class(OpenLayers.Handler, {
*/
handleKeyEvent: function (evt) {
if (this.checkModifiers(evt)) {
this.callback(evt.type, [evt.charCode || evt.keyCode]);
this.callback(evt.type, [evt]);
}
},

129
tests/Control/KeyboardDefaults.html
View File

@@ -23,11 +23,19 @@
"new OpenLayers.Map creates map" );
map.addControl(control);
t.ok( control.map === map, "Control.map is set to the map object" );
t.ok( map.controls[3] === control, "map.controls contains control" );
t.ok( OpenLayers.Util.indexOf(map.controls, control), "map.controls contains control" );
}
/* When interpretting
* the keycodes below (including the comments associated with them),
* consult the URL below. For instance, the Safari browser returns
* "IE keycodes", and so is supported by any keycode labeled "IE".
*
* Very informative URL:
* http://unixpapa.com/js/key.html
*/
function test_Control_KeyboardDefaults_KeyDownEvent (t) {
t.plan( 10 );
t.plan( 16 );
var evt = {which: 1};
map = new OpenLayers.Map('map');
@@ -38,63 +46,118 @@
control = new OpenLayers.Control.KeyboardDefaults();
map.addControl(control);
var STARTING_ZOOM_LEVEL = 4;
var centerLL = new OpenLayers.LonLat(0,0);
map.setCenter(centerLL,4);
map.setCenter(centerLL, STARTING_ZOOM_LEVEL);
// Start new test.
evt.keyCode = OpenLayers.Event.KEY_LEFT;
control.defaultKeyDown(evt);
control.defaultKeyPress(evt);
t.delay_call(
1, function() {
2, function() {
t.ok( map.getCenter().lon < centerLL.lon, "key left works correctly" );
// Start new test.
evt.keyCode = OpenLayers.Event.KEY_RIGHT;
control.defaultKeyDown(evt);
control.defaultKeyPress(evt);
},
1, function() {
t.ok( map.getCenter().lon == centerLL.lon, "key right works correctly" );
2, function() {
t.eq( map.getCenter().lon, centerLL.lon, "key right works correctly" );
// Start new test.
evt.keyCode = OpenLayers.Event.KEY_UP;
control.defaultKeyDown(evt);
control.defaultKeyPress(evt);
},
1, function() {
2, function() {
t.ok( map.getCenter().lat > centerLL.lat, "key up works correctly" );
// Start new test.
evt.keyCode = OpenLayers.Event.KEY_DOWN;
control.defaultKeyDown(evt);
control.defaultKeyPress(evt);
},
1, function() {
2, function() {
t.ok( map.getCenter().lat == centerLL.lat, "key down works correctly" );
// Start new test.
evt.keyCode = 33; //page up
control.defaultKeyDown(evt);
control.defaultKeyPress(evt);
},
1, function() {
2, function() {
t.ok( map.getCenter().lat > centerLL.lat, "key page up works correctly" );
// Start new test.
evt.keyCode = 34; //page down
control.defaultKeyDown(evt);
control.defaultKeyPress(evt);
},
1, function() {
2, function() {
t.ok( map.getCenter().lat == centerLL.lat, "key page down works correctly" );
// Start new test.
evt.keyCode = 35; //end
control.defaultKeyDown(evt);
control.defaultKeyPress(evt);
},
1, function() {
2, function() {
t.ok( map.getCenter().lon > centerLL.lon, "key end works correctly" );
evt.keyCode = 36; //pos1
control.defaultKeyDown(evt);
// Start new test.
evt.keyCode = 36; //home
control.defaultKeyPress(evt);
},
1, function() {
t.ok( map.getCenter().lon == centerLL.lon, "key pos1 works correctly" );
evt.charCode = 43; //+
control.defaultKeyDown(evt);
},
1, function() {
t.eq( map.getZoom(), 5, "key + works correctly" );
2, function() {
t.ok( map.getCenter().lon == centerLL.lon, "key home works correctly");
// Start new test.
evt.keyCode = 43; //+
control.defaultKeyPress(evt);
t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 1, "key code 43 works correctly: +/= key (ASCII), keypad + (ASCII, Opera)" );
// Start new test.
evt.keyCode = 61;
control.defaultKeyPress(evt);
t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 2, "key code 61 works correctly: +/= key (Mozilla, Opera, some ASCII)");
// Start new test.
evt.keyCode = 187;
control.defaultKeyPress(evt);
t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 3, "key code 187 works correctly: +/= key (IE)");
// Start new test.
evt.keyCode = 107;
control.defaultKeyPress(evt);
t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 4, "key code 107 works correctly: keypad + (IE, Mozilla)");
// Start new test.
// set zoomanimation flag manually,
// reason: loadend event in layers.js will not achieved in unittests
map.zoomanimationActive = false;
evt.charCode = 45; //-
control.defaultKeyDown(evt);
},
1, function() {
t.eq( map.getZoom(), 4, "key - works correctly" );
evt.keyCode = 45;
control.defaultKeyPress(evt);
t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 3, "key code 45 works correctly: -/_ key (ASCII, Opera), keypad - (ASCII, Opera)");
// Start new test.
// set zoomanimation flag manually,
// reason: loadend event in layers.js will not achieved in unittests
map.zoomanimationActive = false;
evt.keyCode = 109;
control.defaultKeyPress(evt);
t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 2, "key code 109 works correctly: -/_ key (Mozilla), keypad - (Mozilla, IE)");
// Start new test.
// set zoomanimation flag manually,
// reason: loadend event in layers.js will not achieved in unittests
map.zoomanimationActive = false;
evt.keyCode = 189;
control.defaultKeyPress(evt);
t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 1, "key code 189 works correctly: -/_ key (IE)");
// Start new test.
// set zoomanimation flag manually,
// reason: loadend event in layers.js will not achieved in unittests
map.zoomanimationActive = false;
evt.keyCode = 95;
control.defaultKeyPress(evt);
t.eq( map.getZoom(), STARTING_ZOOM_LEVEL, "key code 95 works correctly: -/_ key (some ASCII)");
}
);
}

10
tests/Control/ModifyFeature.html
View File

@@ -67,7 +67,7 @@
t.eq(control.deleteCodes[0], 46, "Delete code properly turned into an array.");
var control = new OpenLayers.Control.ModifyFeature(layer);
t.eq(control.deleteCodes[0], 46, "Default deleteCodes include delete");
t.eq(control.deleteCodes[1], 100, "Default deleteCodes include 'd'");
t.eq(control.deleteCodes[1], 68, "Default deleteCodes include 'd'");
control.destroy();
layer.destroy();
@@ -123,12 +123,12 @@
"vertex deletion: onModification called with the proper feature");
};
// run the above four tests twice
control.handleKeypress(delKey);
control.handleKeypress(dKey);
control.handleKeypress({keyCode:delKey});
control.handleKeypress({keyCode:dKey});
// now make sure nothing happens if the vertex is mid-drag
control.dragControl.handlers.drag.dragging = true;
control.handleKeypress(delKey);
control.handleKeypress({keyCode:delKey});
// clean up
control.destroy();
@@ -428,7 +428,7 @@
};
point.geometry.parent = poly.geometry;
control.dragControl.feature = point;
control.handleKeypress(46);
control.handleKeypress({keyCode:46});
layer.drawFeature = oldDraw;
map.destroy();

1
tests/list-tests.html
View File

@@ -14,6 +14,7 @@
<li>Control/DragFeature.html</li>
<li>Control/DragPan.html</li>
<li>Control/DrawFeature.html</li>
<li>Control/KeyboardDefaults.html</li>
<li>Control/LayerSwitcher.html</li>
<li>Control/ModifyFeature.html</li>
<li>Control/MousePosition.html</li>