[OpenLayers-Commits] r11539 - trunk/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Fri Feb 25 14:20:21 EST 2011
Author: crschmidt
Date: 2011-02-25 11:20:19 -0800 (Fri, 25 Feb 2011)
New Revision: 11539
Modified:
trunk/openlayers/examples/browser.html
trunk/openlayers/examples/browser.js
Log:
Update the browser.html example to support further testing. patch by cmoullet,
simple example change, (Closes #3108)
Modified: trunk/openlayers/examples/browser.html
===================================================================
--- trunk/openlayers/examples/browser.html 2011-02-25 19:06:58 UTC (rev 11538)
+++ trunk/openlayers/examples/browser.html 2011-02-25 19:20:19 UTC (rev 11539)
@@ -11,6 +11,10 @@
.olControlAttribution {
bottom: 5px;
}
+
+ .tester {
+ margin: 3px;
+ }
</style>
<script type="text/javascript">
function init() {
@@ -79,12 +83,15 @@
</head>
<body onload="init()">
<h1 id="title">Browser detection</h1>
+
<div id="tags">
- browser, vendor, mobile, events, HTML5, gesture, touch
-</div>
+ browser, vendor, mobile, events, HTML5, gesture, touch
+</div>
+
<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">
@@ -95,7 +102,50 @@
<h1>Your browser information</h1>
<div id="result">
+</div>
+<h1>Click or touch the red square to get information about the selected events</h1>
+
+<div>
+ <div class="tester">
+ <INPUT TYPE=CHECKBOX ID="clickID" checked>click<BR>
+ <INPUT TYPE=CHECKBOX ID="dblclickID">dblclick<BR>
+ <INPUT TYPE=CHECKBOX ID="mousedownID">mousedown<BR>
+ <INPUT TYPE=CHECKBOX ID="mouseupID">mouseup<BR>
+ <INPUT TYPE=CHECKBOX ID="mouseoverID">mouseover<BR>
+ <INPUT TYPE=CHECKBOX ID="mousemoveID">mousemove<BR>
+ <INPUT TYPE=CHECKBOX ID="mouseoutID">mouseout<BR>
+ <INPUT TYPE=CHECKBOX ID="touchstartID">touchstart<BR>
+ <INPUT TYPE=CHECKBOX ID="touchendID">touchend<BR>
+ <INPUT TYPE=CHECKBOX ID="touchmoveID">touchmove<BR>
+ <INPUT TYPE=CHECKBOX ID="touchcancelID">touchcancel<BR>
+ <INPUT TYPE=CHECKBOX ID="gesturestartID">gesturestart<BR>
+ <INPUT TYPE=CHECKBOX ID="gesturechangeID">gesturechange<BR>
+ <INPUT TYPE=CHECKBOX ID="gestureendID">gestureend<BR>
+ </div>
+
+ <div style="height: 200px;width: 200px;" class="tester">
+ <div id="box" style="height: 200px; width: 200px; background: none repeat scroll 0% 0% red; "
+ onclick="click(event)"
+ ondblclick="dblclick(event)"
+ onmousedown="mousedown(event)"
+ onmouseup="mouseup(event)"
+ onmouseover="mouseover(event)"
+ onmousemove="mousemove(event)"
+ onmouseout="mouseout(event)"
+ ontouchstart="touchstart(event)"
+ ontouchend="touchend(event)"
+ ontouchmove="touchmove(event)"
+ ontouchcancel="touchcancel(event)"
+ ongesturestart="gesturestart(event)"
+ ongesturechange="gesturechange(event)"
+ ongestureend="gestureend(event)">
+ </div>
+ </div>
+
+ <div id="log" class="tester"></div>
</div>
+
+
</body>
</html>
Modified: trunk/openlayers/examples/browser.js
===================================================================
--- trunk/openlayers/examples/browser.js 2011-02-25 19:06:58 UTC (rev 11538)
+++ trunk/openlayers/examples/browser.js 2011-02-25 19:20:19 UTC (rev 11539)
@@ -49,4 +49,193 @@
);
div.innerHTML = div.innerHTML + "<br>";
}
+var counter = 1;
+function log(title, detail) {
+ var logDiv = document.getElementById("log");
+ idString = "'id" + counter + "'";
+ var newlink = document.createElement('a');
+ newlink.setAttribute('href', "javascript:toggle_visibility(" + idString + ")");
+ newlink.innerHTML = counter + ". " + title;
+ var br1 = document.createElement('br');
+ logDiv.appendChild(newlink);
+ logDiv.appendChild(br1);
+
+ var childDiv = document.createElement('div');
+ childDiv.setAttribute("id", idString.replace("'", "").replace("'", ""));
+ childDiv.setAttribute("style", 'display: none; margin-left : 5px;');
+ childDiv.innerHTML = detail;
+ var br2 = document.createElement('br');
+ logDiv.appendChild(childDiv);
+
+ counter = counter + 1;
+}
+
+function inspect(obj) {
+ if (typeof obj === "undefined") {
+ return "undefined";
+ }
+ var _props = [];
+
+ for (var i in obj) {
+ _props.push(i + " : " + obj[i]);
+ }
+ return " {" + _props.join(",<br>") + "} ";
+}
+
+function click(e) {
+ if (document.getElementById("clickID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function dblclick(e) {
+ if (document.getElementById("dblclickID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function mousedown(e) {
+ if (document.getElementById("mousedownID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function mouseup(e) {
+ if (document.getElementById("mouseupID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function mouseover(e) {
+ if (document.getElementById("mouseoverID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function mousemove(e) {
+ if (document.getElementById("mousemoveID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function mouseout(e) {
+ if (document.getElementById("mouseoutID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function touchstart(e) {
+ if (document.getElementById("touchstartID").checked) {
+ var box = document.getElementById("box");
+ var result = inspect(e);
+ for (var i = 0; i < e.touches.length; i++) {
+ result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+ }
+ log(e.type, result);
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function touchend(e) {
+ if (document.getElementById("touchendID").checked) {
+ var box = document.getElementById("box");
+ var result = inspect(e);
+ for (var i = 0; i < e.touches.length; i++) {
+ result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+ }
+ log(e.type, result);
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function touchmove(e) {
+ if (document.getElementById("touchmoveID").checked) {
+ var targetEvent = e.touches.item(0);
+ var box = document.getElementById("box");
+ box.style.left = targetEvent.clientX + "px";
+ box.style.top = targetEvent.clientY + "px";
+ var result = inspect(e);
+ for (var i = 0; i < e.touches.length; i++) {
+ result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+ }
+ log(e.type, result);
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function touchcancel(e) {
+ if (document.getElementById("touchcancelID").checked) {
+ var box = document.getElementById("box");
+ var result = inspect(e);
+ for (var i = 0; i < e.touches.length; i++) {
+ result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+ }
+ log(e.type, result);
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function gesturestart(e) {
+ if (document.getElementById("gesturestartID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function gesturechange(e) {
+ if (document.getElementById("gesturechangeID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function gestureend(e) {
+ if (document.getElementById("gestureendID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (e.preventDefault) e.preventDefault();
+ }
+ return false;
+}
+
+function toggle_visibility(id) {
+ var e = document.getElementById(id);
+ if (e.style.display == 'block') {
+ e.style.display = 'none';
+ } else {
+ e.style.display = 'block';
+ }
+}
+
+
+
More information about the Commits
mailing list