[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