From eb700d98e14ffab037d66149a0c88e3154f16d94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 28 Feb 2012 10:46:49 +0100 Subject: [PATCH 1/2] add an example for an accessible click control implementation --- examples/click-keyboard.html | 69 ++++++++++++ examples/click-keyboard.js | 199 +++++++++++++++++++++++++++++++++++ 2 files changed, 268 insertions(+) create mode 100644 examples/click-keyboard.html create mode 100644 examples/click-keyboard.js diff --git a/examples/click-keyboard.html b/examples/click-keyboard.html new file mode 100644 index 0000000000..c81917cef2 --- /dev/null +++ b/examples/click-keyboard.html @@ -0,0 +1,69 @@ + + + + + + + Accessible Custom Click Control + + + + + + + + + +

An accessible click control implementation

+ +
+ click, control, accessibility +
+ + + Jump to map + + +
+ +

+ Demonstrate the KeyboardDefaults control as well as a control that + allows clicking on the map using the keyboard. + First focus the map (using tab key or mouse), then press the 'i' + key to activate the query control. You can then move the point + using arrow keys. Press 'RETURN' to get the coordinate. Press 'i' + again to deactivate the control. +

+ + + diff --git a/examples/click-keyboard.js b/examples/click-keyboard.js new file mode 100644 index 0000000000..328e0da768 --- /dev/null +++ b/examples/click-keyboard.js @@ -0,0 +1,199 @@ +var map, navigationControl, queryControl; + +function init(){ + map = new OpenLayers.Map('map', {controls: []}); + var layer = new OpenLayers.Layer.WMS( + "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} + ); + map.addLayers([layer]); + + navigationControl = new OpenLayers.Control.KeyboardDefaults({ + observeElement: 'map' + }); + map.addControl(navigationControl); + + queryControl = new OpenLayers.Control.KeyboardClick({ + observeElement: 'map' + }); + map.addControl(queryControl); + + map.zoomToMaxExtent(); +} + +/** + * Class: OpenLayers.Control.KeyboardClick + * + * A custom control that (a) adds a vector point that can be moved using the + * arrow keys of the keyboard, and (b) displays a browser alert window when the + * RETURN key is pressed. The control can be activated/deactivated using the + * "i" key. When activated the control deactivates any KeyboardDefaults control + * in the map so that the map is not moved when the arrow keys are pressed. + * + * This control relies on the OpenLayers.Handler.KeyboardPoint custom handler. + */ +OpenLayers.Control.KeyboardClick = OpenLayers.Class(OpenLayers.Control, { + initialize: function(options) { + OpenLayers.Control.prototype.initialize.apply(this, [options]); + var observeElement = this.observeElement || document; + this.handler = new OpenLayers.Handler.KeyboardPoint(this, { + done: this.onClick, + cancel: this.deactivate + }, { + observeElement: observeElement + }); + OpenLayers.Event.observe( + observeElement, + "keydown", + OpenLayers.Function.bindAsEventListener( + function(evt) { + if (evt.keyCode == 73) { // "i" + if (this.active) { + this.deactivate(); + } else { + this.activate(); + } + } + }, + this + ) + ); + }, + + onClick: function(geometry) { + alert("You clicked near " + geometry.x + " N, " + + geometry.y + " E"); + }, + + activate: function() { + if(!OpenLayers.Control.prototype.activate.apply(this, arguments)) { + return false; + } + // deactivate any KeyboardDefaults control + var keyboardDefaults = this.map.getControlsByClass( + 'OpenLayers.Control.KeyboardDefaults')[0]; + if (keyboardDefaults) { + keyboardDefaults.deactivate(); + } + return true; + }, + + deactivate: function() { + if(!OpenLayers.Control.prototype.deactivate.apply(this, arguments)) { + return false; + } + // reactivate any KeyboardDefaults control + var keyboardDefaults = this.map.getControlsByClass( + 'OpenLayers.Control.KeyboardDefaults')[0]; + if (keyboardDefaults) { + keyboardDefaults.activate(); + } + return true; + } +}); + +/** + * Class: OpenLayers.Handler.KeyboardPoint + * + * A custom handler that displays a vector point that can be moved + * using the arrow keys of the keyboard. + */ +OpenLayers.Handler.KeyboardPoint = OpenLayers.Class(OpenLayers.Handler, { + + KEY_EVENTS: ["keydown"], + + + initialize: function(control, callbacks, options) { + OpenLayers.Handler.prototype.initialize.apply(this, arguments); + // cache the bound event listener method so it can be unobserved later + this.eventListener = OpenLayers.Function.bindAsEventListener( + this.handleKeyEvent, this + ); + }, + + activate: function() { + if(!OpenLayers.Handler.prototype.activate.apply(this, arguments)) { + return false; + } + this.layer = new OpenLayers.Layer.Vector(this.CLASS_NAME); + this.map.addLayer(this.layer); + this.observeElement = this.observeElement || document; + for (var i=0, len=this.KEY_EVENTS.length; i Date: Tue, 28 Feb 2012 10:48:50 +0100 Subject: [PATCH 2/2] click-keyboard example renamed to accessible-click-control --- examples/{click-keyboard.html => accessible-click-control.html} | 2 +- examples/{click-keyboard.js => accessible-click-control.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename examples/{click-keyboard.html => accessible-click-control.html} (97%) rename examples/{click-keyboard.js => accessible-click-control.js} (100%) diff --git a/examples/click-keyboard.html b/examples/accessible-click-control.html similarity index 97% rename from examples/click-keyboard.html rename to examples/accessible-click-control.html index c81917cef2..c8d97cde88 100644 --- a/examples/click-keyboard.html +++ b/examples/accessible-click-control.html @@ -38,7 +38,7 @@ - +

An accessible click control implementation

diff --git a/examples/click-keyboard.js b/examples/accessible-click-control.js similarity index 100% rename from examples/click-keyboard.js rename to examples/accessible-click-control.js