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() { draw: function() {
this.handler = new OpenLayers.Handler.Keyboard( this, { this.handler = new OpenLayers.Handler.Keyboard( this, {
"keypress": this.defaultKeyPress }); "keydown": this.defaultKeyPress });
this.activate(); this.activate();
}, },
/** /**
* Method: defaultKeyPress * 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: * Parameters:
* code - {Integer} * code - {Integer}
*/ */
defaultKeyPress: function (code) { defaultKeyPress: function (evt) {
switch(code) { switch(evt.keyCode) {
case OpenLayers.Event.KEY_LEFT: case OpenLayers.Event.KEY_LEFT:
this.map.pan(-this.slideFactor, 0); this.map.pan(-this.slideFactor, 0);
break; break;
@@ -72,35 +80,35 @@ OpenLayers.Control.KeyboardDefaults = OpenLayers.Class(OpenLayers.Control, {
this.map.pan(0, this.slideFactor); this.map.pan(0, this.slideFactor);
break; break;
case 33: // Page Up case 33: // Page Up. Same in all browsers.
var size = this.map.getSize(); var size = this.map.getSize();
this.map.pan(0, -0.75*size.h); this.map.pan(0, -0.75*size.h);
break; break;
case 34: // Page Down case 34: // Page Down. Same in all browsers.
var size = this.map.getSize(); var size = this.map.getSize();
this.map.pan(0, 0.75*size.h); this.map.pan(0, 0.75*size.h);
break; break;
case 35: // End case 35: // End. Same in all browsers.
var size = this.map.getSize(); var size = this.map.getSize();
this.map.pan(0.75*size.w, 0); this.map.pan(0.75*size.w, 0);
break; break;
case 36: // Pos1 case 36: // Home. Same in all browsers.
var size = this.map.getSize(); var size = this.map.getSize();
this.map.pan(-0.75*size.w, 0); this.map.pan(-0.75*size.w, 0);
break; 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(); this.map.zoomIn();
break; break;
case 45: // - case 45: // -/_ (ASCII, Opera), keypad - (ASCII, Opera)
case 109: // -/_ (Mozilla), keypad - (Mozilla, IE)
case 189: // -/_ (IE)
case 95: // -/_ (some ASCII)
this.map.zoomOut(); this.map.zoomOut();
break; break;
case 107: // + (IE only)
this.map.zoomIn();
break;
case 109: // - (IE only)
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 * {Array(Integer)} Keycodes for deleting verticies. Set to null to disable
* vertex deltion by keypress. If non-null, keypresses with codes * vertex deltion by keypress. If non-null, keypresses with codes
* in this array will delete vertices under the mouse. Default * 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, deleteCodes: null,
@@ -183,7 +183,7 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
this.layer.style || this.layer.styleMap.createSymbolizer()); this.layer.style || this.layer.styleMap.createSymbolizer());
this.virtualStyle.fillOpacity = 0.3; this.virtualStyle.fillOpacity = 0.3;
this.virtualStyle.strokeOpacity = 0.3; this.virtualStyle.strokeOpacity = 0.3;
this.deleteCodes = [46, 100]; this.deleteCodes = [46, 68];
this.mode = OpenLayers.Control.ModifyFeature.RESHAPE; this.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
OpenLayers.Control.prototype.initialize.apply(this, [options]); OpenLayers.Control.prototype.initialize.apply(this, [options]);
if(!(this.deleteCodes instanceof Array)) { if(!(this.deleteCodes instanceof Array)) {
@@ -227,7 +227,7 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
// configure the keyboard handler // configure the keyboard handler
var keyboardOptions = { var keyboardOptions = {
keypress: this.handleKeypress keydown: this.handleKeypress
}; };
this.handlers = { this.handlers = {
keyboard: new OpenLayers.Handler.Keyboard(this, keyboardOptions) keyboard: new OpenLayers.Handler.Keyboard(this, keyboardOptions)
@@ -517,7 +517,9 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
* Parameters: * Parameters:
* {Integer} Key code corresponding to the keypress event. * {Integer} Key code corresponding to the keypress event.
*/ */
handleKeypress: function(code) { handleKeypress: function(evt) {
var code = evt.keyCode;
// check for delete key // check for delete key
if(this.feature && if(this.feature &&
OpenLayers.Util.indexOf(this.deleteCodes, code) != -1) { 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 * Constant: KEY_EVENTS
* keydown, keypress, keyup * keydown, keypress, keyup
*/ */
KEY_EVENTS: ["keydown", "keypress", "keyup"], KEY_EVENTS: ["keydown", "keyup"],
/** /**
* Property: eventListener * Property: eventListener
@@ -72,7 +72,7 @@ OpenLayers.Handler.Keyboard = OpenLayers.Class(OpenLayers.Handler, {
if (OpenLayers.Handler.prototype.activate.apply(this, arguments)) { if (OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) { for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) {
OpenLayers.Event.observe( OpenLayers.Event.observe(
window, this.KEY_EVENTS[i], this.eventListener); document, this.KEY_EVENTS[i], this.eventListener);
} }
return true; return true;
} else { } else {
@@ -88,7 +88,7 @@ OpenLayers.Handler.Keyboard = OpenLayers.Class(OpenLayers.Handler, {
if (OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) { if (OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) { for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) {
OpenLayers.Event.stopObserving( OpenLayers.Event.stopObserving(
window, this.KEY_EVENTS[i], this.eventListener); document, this.KEY_EVENTS[i], this.eventListener);
} }
deactivated = true; deactivated = true;
} }
@@ -100,7 +100,7 @@ OpenLayers.Handler.Keyboard = OpenLayers.Class(OpenLayers.Handler, {
*/ */
handleKeyEvent: function (evt) { handleKeyEvent: function (evt) {
if (this.checkModifiers(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" ); "new OpenLayers.Map creates map" );
map.addControl(control); map.addControl(control);
t.ok( control.map === map, "Control.map is set to the map object" ); 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) { function test_Control_KeyboardDefaults_KeyDownEvent (t) {
t.plan( 10 ); t.plan( 16 );
var evt = {which: 1}; var evt = {which: 1};
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
@@ -38,63 +46,118 @@
control = new OpenLayers.Control.KeyboardDefaults(); control = new OpenLayers.Control.KeyboardDefaults();
map.addControl(control); map.addControl(control);
var STARTING_ZOOM_LEVEL = 4;
var centerLL = new OpenLayers.LonLat(0,0); 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; evt.keyCode = OpenLayers.Event.KEY_LEFT;
control.defaultKeyDown(evt); control.defaultKeyPress(evt);
t.delay_call( t.delay_call(
1, function() { 2, function() {
t.ok( map.getCenter().lon < centerLL.lon, "key left works correctly" ); t.ok( map.getCenter().lon < centerLL.lon, "key left works correctly" );
// Start new test.
evt.keyCode = OpenLayers.Event.KEY_RIGHT; evt.keyCode = OpenLayers.Event.KEY_RIGHT;
control.defaultKeyDown(evt); control.defaultKeyPress(evt);
}, },
1, function() { 2, function() {
t.ok( map.getCenter().lon == centerLL.lon, "key right works correctly" ); t.eq( map.getCenter().lon, centerLL.lon, "key right works correctly" );
// Start new test.
evt.keyCode = OpenLayers.Event.KEY_UP; 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" ); t.ok( map.getCenter().lat > centerLL.lat, "key up works correctly" );
// Start new test.
evt.keyCode = OpenLayers.Event.KEY_DOWN; 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" ); t.ok( map.getCenter().lat == centerLL.lat, "key down works correctly" );
// Start new test.
evt.keyCode = 33; //page up 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" ); t.ok( map.getCenter().lat > centerLL.lat, "key page up works correctly" );
// Start new test.
evt.keyCode = 34; //page down 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" ); t.ok( map.getCenter().lat == centerLL.lat, "key page down works correctly" );
// Start new test.
evt.keyCode = 35; //end 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" ); 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() { 2, function() {
t.ok( map.getCenter().lon == centerLL.lon, "key pos1 works correctly" ); t.ok( map.getCenter().lon == centerLL.lon, "key home works correctly");
evt.charCode = 43; //+
control.defaultKeyDown(evt); // Start new test.
}, evt.keyCode = 43; //+
1, function() { control.defaultKeyPress(evt);
t.eq( map.getZoom(), 5, "key + works correctly" ); 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, // set zoomanimation flag manually,
// reason: loadend event in layers.js will not achieved in unittests // reason: loadend event in layers.js will not achieved in unittests
map.zoomanimationActive = false; map.zoomanimationActive = false;
evt.charCode = 45; //- evt.keyCode = 45;
control.defaultKeyDown(evt); control.defaultKeyPress(evt);
}, t.eq( map.getZoom(), STARTING_ZOOM_LEVEL + 3, "key code 45 works correctly: -/_ key (ASCII, Opera), keypad - (ASCII, Opera)");
1, function() {
t.eq( map.getZoom(), 4, "key - works correctly" ); // 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."); t.eq(control.deleteCodes[0], 46, "Delete code properly turned into an array.");
var control = new OpenLayers.Control.ModifyFeature(layer); var control = new OpenLayers.Control.ModifyFeature(layer);
t.eq(control.deleteCodes[0], 46, "Default deleteCodes include delete"); 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(); control.destroy();
layer.destroy(); layer.destroy();
@@ -123,12 +123,12 @@
"vertex deletion: onModification called with the proper feature"); "vertex deletion: onModification called with the proper feature");
}; };
// run the above four tests twice // run the above four tests twice
control.handleKeypress(delKey); control.handleKeypress({keyCode:delKey});
control.handleKeypress(dKey); control.handleKeypress({keyCode:dKey});
// now make sure nothing happens if the vertex is mid-drag // now make sure nothing happens if the vertex is mid-drag
control.dragControl.handlers.drag.dragging = true; control.dragControl.handlers.drag.dragging = true;
control.handleKeypress(delKey); control.handleKeypress({keyCode:delKey});
// clean up // clean up
control.destroy(); control.destroy();
@@ -428,7 +428,7 @@
}; };
point.geometry.parent = poly.geometry; point.geometry.parent = poly.geometry;
control.dragControl.feature = point; control.dragControl.feature = point;
control.handleKeypress(46); control.handleKeypress({keyCode:46});
layer.drawFeature = oldDraw; layer.drawFeature = oldDraw;
map.destroy(); map.destroy();

1
tests/list-tests.html
View File

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