Adding a test page to show mobile browser events; this is useful for when
a new device is available to understand what events are supported by a given browser. git-svn-id: http://svn.openlayers.org/trunk/openlayers@11219 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
@@ -0,0 +1,99 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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>OpenLayers Browser Detection</title>
|
||||||
|
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
|
||||||
|
<link rel="stylesheet" href="style.css" type="text/css"/>
|
||||||
|
<script type="text/javascript" src="browser.js"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
.olControlAttribution {
|
||||||
|
bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function init() {
|
||||||
|
var result = document.getElementById('result');
|
||||||
|
result.innerHTML = result.innerHTML + "Browser CodeName: " + navigator.appCodeName + '<br>';
|
||||||
|
result.innerHTML = result.innerHTML + "Browser Name: " + navigator.appName + '<br>';
|
||||||
|
result.innerHTML = result.innerHTML + "Browser Version: " + navigator.appVersion + '<br>';
|
||||||
|
result.innerHTML = result.innerHTML + "Cookies Enabled: " + navigator.cookieEnabled + '<br>';
|
||||||
|
result.innerHTML = result.innerHTML + "Platform: " + navigator.platform + '<br>';
|
||||||
|
result.innerHTML = result.innerHTML + 'User agent: ' + navigator.userAgent + '<br>';
|
||||||
|
divResult('mouse', 'click', null, result);
|
||||||
|
divResult('mouse', 'dblclick', null, result);
|
||||||
|
divResult('mouse', 'mousedown', null, result);
|
||||||
|
divResult('mouse', 'mouseup', null, result);
|
||||||
|
divResult('mouse', 'mouseover', null, result);
|
||||||
|
divResult('mouse', 'mousemove', null, result);
|
||||||
|
divResult('mouse', 'mouseout', null, result);
|
||||||
|
|
||||||
|
divResult('key', 'keypress', null, result);
|
||||||
|
divResult('key', 'keydown', null, result);
|
||||||
|
divResult('key', 'keyup', null, result);
|
||||||
|
|
||||||
|
divResult('HTML', 'load', null, result);
|
||||||
|
divResult('HTML', 'unload', window, result);
|
||||||
|
divResult('HTML', 'abort', null, result);
|
||||||
|
divResult('HTML', 'error', null, result);
|
||||||
|
|
||||||
|
divResult('view', 'resize', window, result);
|
||||||
|
divResult('view', 'scroll', null, result);
|
||||||
|
|
||||||
|
divResult('form', 'submit', null, result);
|
||||||
|
divResult('form', 'reset', null, result);
|
||||||
|
|
||||||
|
divResult('form control', 'select', null, result);
|
||||||
|
divResult('form control', 'change', null, result);
|
||||||
|
|
||||||
|
divResult('activation', 'focus', null, result);
|
||||||
|
divResult('activation', 'blur', null, result);
|
||||||
|
|
||||||
|
divResult('touch', 'touchstart', null, result);
|
||||||
|
divResult('touch', 'touchend', null, result);
|
||||||
|
divResult('touch', 'touchmove', null, result);
|
||||||
|
divResult('touch', 'touchcancel', null, result);
|
||||||
|
|
||||||
|
divResult('gesture', 'gesturestart', null, result);
|
||||||
|
divResult('gesture', 'gesturechange', null, result);
|
||||||
|
divResult('gesture', 'gestureend', null, result);
|
||||||
|
|
||||||
|
divResult('HTML5', 'hashchange', document.body, result);
|
||||||
|
divResult('HTML5', 'online', document.body, result);
|
||||||
|
divResult('HTML5', 'offline', document.body, result);
|
||||||
|
divResult('HTML5', 'message', window, result);
|
||||||
|
divResult('HTML5', 'undo', document.body, result);
|
||||||
|
divResult('HTML5', 'redo', document.body, result);
|
||||||
|
divResult('HTML5', 'storage', window, result);
|
||||||
|
divResult('HTML5', 'popstate', window, result);
|
||||||
|
divResult('HTML5', 'canplay', document.createElement('video'), result);
|
||||||
|
divResult('HTML5', 'seeking', document.createElement('video'), result);
|
||||||
|
divResult('HTML5', 'seekend', document.createElement('video'), result);
|
||||||
|
|
||||||
|
divResult('orientation', 'deviceorientation', window, result);
|
||||||
|
divResult('orientation', 'mozorientation', window, result);
|
||||||
|
divResult('orientation', 'devicemotion', window, result);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onload="init()">
|
||||||
|
<h1 id="title">Browser detection</h1>
|
||||||
|
|
||||||
|
<p id="shortdesc">
|
||||||
|
The goal of this script is to inform about the capacity of the browser used by the user.
|
||||||
|
</p>
|
||||||
|
<div id="docs">
|
||||||
|
<p>
|
||||||
|
See the <a href="browser.js" target="_blank">
|
||||||
|
browser.js source</a> to see how this is done.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>Your browser information</h1>
|
||||||
|
|
||||||
|
<div id="result">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
var isEventSupported = (function(undef) {
|
||||||
|
|
||||||
|
var TAGNAMES = {
|
||||||
|
'select':'input',
|
||||||
|
'change':'input',
|
||||||
|
'submit':'form',
|
||||||
|
'reset':'form',
|
||||||
|
'error':'img',
|
||||||
|
'load':'img',
|
||||||
|
'abort':'img'
|
||||||
|
};
|
||||||
|
|
||||||
|
function isEventSupported(eventName, element) {
|
||||||
|
element = element || document.createElement(TAGNAMES[eventName] || 'div');
|
||||||
|
eventName = 'on' + eventName;
|
||||||
|
|
||||||
|
var isSupported = (eventName in element);
|
||||||
|
|
||||||
|
if (!isSupported) {
|
||||||
|
// if it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
|
||||||
|
if (!element.setAttribute) {
|
||||||
|
element = document.createElement('div');
|
||||||
|
}
|
||||||
|
if (element.setAttribute && element.removeAttribute) {
|
||||||
|
element.setAttribute(eventName, '');
|
||||||
|
isSupported = typeof element[eventName] == 'function';
|
||||||
|
|
||||||
|
// if property was created, "remove it" (by setting value to `undefined`)
|
||||||
|
if (typeof element[eventName] != 'undefined') {
|
||||||
|
element[eventName] = undef;
|
||||||
|
}
|
||||||
|
element.removeAttribute(eventName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
element = null;
|
||||||
|
return isSupported;
|
||||||
|
}
|
||||||
|
|
||||||
|
return isEventSupported;
|
||||||
|
})();
|
||||||
|
|
||||||
|
function divResult(category, name, element, div) {
|
||||||
|
div.innerHTML = div.innerHTML + category + " " + name + ": ";
|
||||||
|
div.innerHTML = div.innerHTML + (
|
||||||
|
isEventSupported(name, element)
|
||||||
|
? '<span style="background-color:green;color:white;">true</span></td>'
|
||||||
|
: '<span style="background-color:red;color:white;">false</span></td>'
|
||||||
|
);
|
||||||
|
div.innerHTML = div.innerHTML + "<br>";
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user