[OpenLayers-Commits] r11422 - sandbox/cmoullet/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Thu Feb 24 10:13:37 EST 2011
Author: cmoullet
Date: 2011-02-24 07:13:36 -0800 (Thu, 24 Feb 2011)
New Revision: 11422
Modified:
sandbox/cmoullet/openlayers/examples/browser.html
sandbox/cmoullet/openlayers/examples/browser.js
Log:
Add event inspecting capabilities
Modified: sandbox/cmoullet/openlayers/examples/browser.html
===================================================================
--- sandbox/cmoullet/openlayers/examples/browser.html 2011-02-24 15:01:55 UTC (rev 11421)
+++ sandbox/cmoullet/openlayers/examples/browser.html 2011-02-24 15:13:36 UTC (rev 11422)
@@ -79,12 +79,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 +98,42 @@
<h1>Your browser information</h1>
<div id="result">
+</div>
+
+<div id='foo' style='display: none; visibility: hidden'>This is foo</div>
+
+<h1>Click or touch the red square to get information about the events</h1>
+<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>
+
+<div style="height: 250px;">
+ <div id="box" style="height: 225px; width: 225px; background: none repeat scroll 0% 0% red; position: absolute;"
+ 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)">
+ </div>
</div>
+
+<div id="log"></div>
+<div id="logDetails"></div>
+
</body>
</html>
Modified: sandbox/cmoullet/openlayers/examples/browser.js
===================================================================
--- sandbox/cmoullet/openlayers/examples/browser.js 2011-02-24 15:01:55 UTC (rev 11421)
+++ sandbox/cmoullet/openlayers/examples/browser.js 2011-02-24 15:13:36 UTC (rev 11422)
@@ -49,4 +49,156 @@
);
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 (event.preventDefault) event.preventDefault();
+ return false;
+ } else {
+ return false;
+ }
+}
+
+function dblclick(e) {
+ if (document.getElementById("dblclickID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (event.preventDefault) event.preventDefault();
+ }
+ return false;
+}
+
+function mousedown(e) {
+ if (document.getElementById("mousedownID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (event.preventDefault) event.preventDefault();
+ }
+ return false;
+}
+
+function mouseup(e) {
+ if (document.getElementById("mouseupID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (event.preventDefault) event.preventDefault();
+ }
+ return false;
+}
+
+function mouseover(e) {
+ if (document.getElementById("mouseoverID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (event.preventDefault) event.preventDefault();
+ }
+ return false;
+}
+
+function mousemove(e) {
+ if (document.getElementById("mousemoveID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (event.preventDefault) event.preventDefault();
+ }
+ return false;
+}
+
+function mouseout(e) {
+ if (document.getElementById("mouseoutID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ if (event.preventDefault) event.preventDefault();
+ }
+ return false;
+}
+
+function touchstart(e) {
+ if (document.getElementById("touchstartID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ //logDetails(inspect(e.touches.item(0)));
+ if (event.preventDefault) event.preventDefault();
+ }
+ return false;
+}
+
+function touchend(e) {
+ if (document.getElementById("touchendID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ //logDetails(inspect(e.touches.item(0)));
+ if (event.preventDefault) event.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";
+ log(e.type, inspect(e));
+ //logDetails(inspect(e));
+ if (event.preventDefault) event.preventDefault();
+ }
+ return false;
+}
+
+function touchcancel(e) {
+ if (document.getElementById("touchcancelID").checked) {
+ var box = document.getElementById("box");
+ log(e.type, inspect(e));
+ //logDetails(inspect(e.touches.item(0)));
+ if (event.preventDefault) event.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