[Commits] r2543 - sandbox/cmoullet/ux/MobileEvents

Wed Jan 5 07:25:16 CET 2011

Author: cmoullet
Date: 2011-01-05 07:25:15 +0100 (Wed, 05 Jan 2011)
New Revision: 2543

Added:
   sandbox/cmoullet/ux/MobileEvents/playground.html
   sandbox/cmoullet/ux/MobileEvents/playground.js
Log:
Playground for mobile events

Added: sandbox/cmoullet/ux/MobileEvents/playground.html
===================================================================

--- sandbox/cmoullet/ux/MobileEvents/playground.html	                        (rev 0)
+++ sandbox/cmoullet/ux/MobileEvents/playground.html	2011-01-05 06:25:15 UTC (rev 2543)
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Div dlayground</title>
+
+    <style type="text/css">
+        DIV#box {
+            position: fixed;
+            width: 80px;
+            height: 80px;
+            left: 10px;
+            top: 10px;
+            background: red;
+        }
+
+        DIV#divCbMouseMove {
+            position: fixed;
+            left: 10px;
+            top: 100px;
+        }
+
+        DIV#console {
+            position: fixed;
+            left: 10px;
+            top: 120px;
+        }
+
+    </style>
+</head>
+<body>
+
+<script src="playground.js" type="text/javascript"></script>
+<div id="box"
+     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="divCbMouseMove">
+    <input type="checkbox" id="cbMouseMove" value="mouseMoveEvent"> Follow mousemove</input>
+</div>
+<div id="console"></div>
+
+
+</body>
+</html>
\ No newline at end of file

Added: sandbox/cmoullet/ux/MobileEvents/playground.js
===================================================================
--- sandbox/cmoullet/ux/MobileEvents/playground.js	                        (rev 0)
+++ sandbox/cmoullet/ux/MobileEvents/playground.js	2011-01-05 06:25:15 UTC (rev 2543)
@@ -0,0 +1,50 @@
+function click(event) {
+    logEvent("click");
+}
+function dblclick(event) {
+    logEvent("dblclick");
+}
+
+function mousedown(event) {
+    logEvent("mousedown");
+}
+
+function mouseup(event) {
+    logEvent("mouseup");
+}
+function mouseover(event) {
+    logEvent("mouseover");
+}
+function mousemove(event) {
+    if (document.getElementById('cbMouseMove').checked) {
+        logEvent("mousemove");
+    }
+}
+function mouseout(event) {
+    logEvent("mouseout");
+}
+function touchstart(event) {
+    logEvent("touchstart");
+}
+function touchend(event) {
+    logEvent("touchend");
+}
+function touchmove(event) {
+    logEvent("touchmove");
+}
+function touchcancel(event) {
+    logEvent("touchcancel");
+}
+function gesturestart(event) {
+    logEvent("gesturestart");
+}
+function gesturechange(event) {
+    logEvent("gesturechange");
+}
+function gestureend(event) {
+    logEvent("gestureend");
+}
+
+function logEvent(text) {
+    document.getElementById('console').innerHTML += text + " ";
+}
\ No newline at end of file

