[OpenLayers-Commits] r11171 - sandbox/cmoullet/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Mon Feb 21 06:54:05 EST 2011
Author: cmoullet
Date: 2011-02-21 03:54:05 -0800 (Mon, 21 Feb 2011)
New Revision: 11171
Added:
sandbox/cmoullet/openlayers/examples/browser.html
sandbox/cmoullet/openlayers/examples/browser.js
Log:
Add a browser detection script and event tester
Added: sandbox/cmoullet/openlayers/examples/browser.html
===================================================================
--- sandbox/cmoullet/openlayers/examples/browser.html (rev 0)
+++ sandbox/cmoullet/openlayers/examples/browser.html 2011-02-21 11:54:05 UTC (rev 11171)
@@ -0,0 +1,98 @@
+<!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);
+ }
+ </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>
+ This example informs about the capacity of the browser
+ </p>
+
+ <p>
+ See the <a href="browser.js" target="_blank">
+ browser.js source</a> to see how this is done.
+ </p>
+</div>
+
+<div id="result">
+
+</div>
+</body>
+</html>
Added: sandbox/cmoullet/openlayers/examples/browser.js
===================================================================
--- sandbox/cmoullet/openlayers/examples/browser.js (rev 0)
+++ sandbox/cmoullet/openlayers/examples/browser.js 2011-02-21 11:54:05 UTC (rev 11171)
@@ -0,0 +1,72 @@
+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 w(category, name, element) {
+ // Use eventTester.html?resultonly=true or eventTester.html
+ document.write('<tr>');
+ if (!getUrlParam('resultonly')) {
+ document.write('<td>' + category + '</td><td>' + name + '</td> ');
+ }
+ document.write('<td>' + (
+ isEventSupported(name, element)
+ ? '<span style="background-color:green;color:white;">true</span></td>'
+ : '<span style="background-color:red;color:white;">false</span></td>'
+ ));
+ document.write('<tr>');
+}
+
+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>";
+}
+
+function getUrlParam(param)
+{
+ param = param.replace(/([\[\](){}*?+^$.\\|])/g, "\\$1");
+ var regex = new RegExp("[?&]" + param + "=([^&#]*)");
+ var url = decodeURIComponent(window.location.href);
+ var match = regex.exec(url);
+ return match ? match[1] : "";
+}
+
More information about the Commits
mailing list