Merge pull request #250 from camptocamp/access_clickexample
Accessible click control example
This commit is contained in:
Éric Lemoine
69
examples/accessible-click-control.html
Normal file
69
examples/accessible-click-control.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>Accessible Custom Click Control</title>
|
||||
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
a em {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.api {
|
||||
font-size:1em;
|
||||
text-decoration:underline;
|
||||
}
|
||||
a.accesskey {
|
||||
color: white;
|
||||
}
|
||||
a.accesskey:focus {
|
||||
color: #436976;
|
||||
}
|
||||
a.zoom {
|
||||
padding-right: 20px;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="accessible-click-control.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">An accessible click control implementation</h1>
|
||||
|
||||
<div id="tags">
|
||||
click, control, accessibility
|
||||
</div>
|
||||
|
||||
<a class="accesskey"
|
||||
href=""
|
||||
accesskey="1"
|
||||
onclick="document.getElementById('map').focus();return false;">
|
||||
Jump to map
|
||||
</a>
|
||||
|
||||
<div id="map" class="smallmap" tabindex="0"></div>
|
||||
|
||||
<p id="desc">
|
||||
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.
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
199
examples/accessible-click-control.js
Normal file
199
examples/accessible-click-control.js
Normal file
@@ -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<len; i++) {
|
||||
OpenLayers.Event.observe(
|
||||
this.observeElement, this.KEY_EVENTS[i], this.eventListener);
|
||||
}
|
||||
if(!this.point) {
|
||||
this.createFeature();
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
deactivate: function() {
|
||||
if (!OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
|
||||
return false;
|
||||
}
|
||||
for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) {
|
||||
OpenLayers.Event.stopObserving(
|
||||
this.observeElement, this.KEY_EVENTS[i], this.eventListener);
|
||||
}
|
||||
this.map.removeLayer(this.layer);
|
||||
this.destroyFeature();
|
||||
return true;
|
||||
},
|
||||
|
||||
handleKeyEvent: function (evt) {
|
||||
switch(evt.keyCode) {
|
||||
case OpenLayers.Event.KEY_LEFT:
|
||||
this.modifyFeature(-3, 0);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_RIGHT:
|
||||
this.modifyFeature(3, 0);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_UP:
|
||||
this.modifyFeature(0, 3);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_DOWN:
|
||||
this.modifyFeature(0, -3);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_RETURN:
|
||||
this.callback('done', [this.point.geometry.clone()]);
|
||||
break;
|
||||
case OpenLayers.Event.KEY_ESC:
|
||||
this.callback('cancel');
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
modifyFeature: function(lon, lat) {
|
||||
if(!this.point) {
|
||||
this.createFeature();
|
||||
}
|
||||
var resolution = this.map.getResolution();
|
||||
this.point.geometry.x = this.point.geometry.x + lon * resolution;
|
||||
this.point.geometry.y = this.point.geometry.y + lat * resolution;
|
||||
this.callback("modify", [this.point.geometry, this.point, false]);
|
||||
this.point.geometry.clearBounds();
|
||||
this.drawFeature();
|
||||
},
|
||||
|
||||
createFeature: function() {
|
||||
var center = this.map.getCenter();
|
||||
var geometry = new OpenLayers.Geometry.Point(
|
||||
center.lon, center.lat
|
||||
);
|
||||
this.point = new OpenLayers.Feature.Vector(geometry);
|
||||
this.callback("create", [this.point.geometry, this.point]);
|
||||
this.point.geometry.clearBounds();
|
||||
this.layer.addFeatures([this.point], {silent: true});
|
||||
},
|
||||
|
||||
destroyFeature: function() {
|
||||
this.layer.destroyFeatures([this.point]);
|
||||
this.point = null;
|
||||
},
|
||||
|
||||
drawFeature: function() {
|
||||
this.layer.drawFeature(this.point, this.style);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user