[OpenLayers-Commits] r11461 - sandbox/cmoullet/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Fri Feb 25 03:56:28 EST 2011
Author: cmoullet
Date: 2011-02-25 00:56:27 -0800 (Fri, 25 Feb 2011)
New Revision: 11461
Modified:
sandbox/cmoullet/openlayers/examples/browser.html
sandbox/cmoullet/openlayers/examples/browser.js
Log:
Improve example with analysis of browser events
Modified: sandbox/cmoullet/openlayers/examples/browser.html
===================================================================
--- sandbox/cmoullet/openlayers/examples/browser.html 2011-02-25 08:55:39 UTC (rev 11460)
+++ sandbox/cmoullet/openlayers/examples/browser.html 2011-02-25 08:56:27 UTC (rev 11461)
@@ -11,6 +11,15 @@
.olControlAttribution {
bottom: 5px;
}
+
+ .tester {
+ float: left;
+ margin: 10px;
+ }
+
+ .logger {
+ float: none;
+ }
</style>
<script type="text/javascript">
function init() {
@@ -100,46 +109,48 @@
<div id="result">
</div>
+<h1>Click or touch the red square to get information about the selected events</h1>
-<div id='foo' style='display: none; visibility: hidden'>This is foo</div>
+<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>
-<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>
-<INPUT TYPE=CHECKBOX ID="gesturestartID">gesturestart<BR>
-<INPUT TYPE=CHECKBOX ID="gesturechangeID">gesturechange<BR>
-<INPUT TYPE=CHECKBOX ID="gestureendID">gestureend<BR>
+ <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 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)"
- ongesturestart="gesturestart(event)"
- ongesturechange="gesturechange(event)"
- ongestureend="gestureend(event)">
- </div>
+ <div id="log" class="tester"></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-25 08:55:39 UTC (rev 11460)
+++ sandbox/cmoullet/openlayers/examples/browser.js 2011-02-25 08:56:27 UTC (rev 11461)
@@ -149,8 +149,11 @@
function touchstart(e) {
if (document.getElementById("touchstartID").checked) {
var box = document.getElementById("box");
- log(e.type, inspect(e));
- //logDetails(inspect(e.touches.item(0)));
+ 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;
@@ -159,8 +162,11 @@
function touchend(e) {
if (document.getElementById("touchendID").checked) {
var box = document.getElementById("box");
- log(e.type, inspect(e));
- //logDetails(inspect(e.touches.item(0)));
+ 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;
@@ -172,8 +178,11 @@
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));
+ 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;
@@ -182,8 +191,11 @@
function touchcancel(e) {
if (document.getElementById("touchcancelID").checked) {
var box = document.getElementById("box");
- log(e.type, inspect(e));
- //logDetails(inspect(e.touches.item(0)));
+ 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;
@@ -192,12 +204,7 @@
function gesturestart(e) {
if (document.getElementById("gesturestartID").checked) {
var box = document.getElementById("box");
- var result = inspect(e);
- for (var i = 0; i < e.touches.item.length; i++) {
- result = result + inspect(e.touches.item(i));
- }
- log(e.type, result);
- //logDetails(inspect(e.touches.item(0)));
+ log(e.type, inspect(e));
if (e.preventDefault) e.preventDefault();
}
return false;
@@ -207,7 +214,6 @@
if (document.getElementById("gesturechangeID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
- //logDetails(inspect(e.touches.item(0)));
if (e.preventDefault) e.preventDefault();
}
return false;
@@ -217,7 +223,6 @@
if (document.getElementById("gestureendID").checked) {
var box = document.getElementById("box");
log(e.type, inspect(e));
- //logDetails(inspect(e.touches.item(0)));
if (e.preventDefault) e.preventDefault();
}
return false;
More information about the Commits
mailing list