1<!doctype html>
2<!-- Modified from rbyers.github.io/eventTest.js
3
4Changes were to remove some elements which don't make sense in this context,
5including UI to toggle events and various non-mouse, keyboard, touch events.
6There were also some formatting changes.  Finally, some test-friendly functions
7like clearPreviousEvents() were added.
8
9Add event handlers for all mouse, touch, and keyboard events.  Log any events
10seen.  Intended to be queried by an autotest after input playback.
11
12-->
13<html lang="en">
14<head>
15<meta charset="utf-8">
16<title>Touch Event Test Page</title>
17<script type="text/javascript">
18var pageReady = false; // Used to determine whether test can run yet.
19var lastEvent; // The last event seen.
20var eventCount = 0; // Count of events seen.
21var timeOfLastEvent; // Timestamp of when last event occurred.
22var netScrollDelta = {x: 0, y: 0}; // Net scroll seen.
23var clickCount = 0; // Total number of clicks seen.
24var eventLog = ''; // Log of all events seen.
25var preventDefaults = true; // Boolean whether to prevent default events.
26
27
28// Reset previously seen events.
29function clearPreviousEvents() {
30  lastEvent = undefined;
31  eventCount = 0;
32  timeOfLastEvent = undefined;
33  netScrollDelta = {x: 0, y: 0};
34  clickCount = 0;
35  eventLog = '';
36  pageReady = true;
37}
38
39// Add the given event and message to the running eventLog.
40function logEvent(event, msg) {
41  eventCount += 1;
42  if (!msg) {
43    msg = '';
44  }
45  if (timeOfLastEvent && event.timeStamp) {
46    msg += ' timeDelta=' + round(event.timeStamp - timeOfLastEvent) + 'ms';
47  }
48  timeOfLastEvent = event.timeStamp;
49  lastEvent = event;
50  msg = event.type + ': ' + msg + '\n';
51  eventLog += msg;
52  console.log(msg);
53}
54
55// Call preventDefault() on the event if preventDefaults is set.
56function preventDefault(event) {
57  if (preventDefaults) {
58    event.preventDefault();
59  }
60}
61
62// Round the given value to 2 decimal places.
63function round(val) {
64  return Math.round(val * 100) / 100;
65}
66
67// addEventListener with the given handler for the given event types.
68function setHandlerState(events, handler) {
69  for (var i = 0; i < events.length; i++) {
70    document.addEventListener(events[i], handler);
71  }
72};
73
74// mouse event handler
75function mouseEventHandler(event)
76{
77  var msg = '';
78  if (event.type == 'click') {
79    clickCount += 1;
80  }
81  if (event.type == 'mousewheel') {
82    msg += ', wheelDelta=' + round(event.wheelDelta) +
83        ' (' + round(event.wheelDeltaX) + ',' +
84        round(event.wheelDeltaY) + ')';
85    netScrollDelta.x += event.wheelDeltaX;
86    netScrollDelta.y += event.wheelDeltaY;
87  }
88  if (event.type == 'wheel') {
89    msg += ', deltaX=' + round(event.deltaX) + ', deltaY=' +
90        round(event.deltaY) + ', deltaZ=' + round(event.deltaZ);
91    netScrollDelta.x += event.deltaX;
92    netScrollDelta.y += event.deltaY;
93  }
94  if (event.type == 'mousewheel' || event.type == 'wheel') {
95    msg += ', deltaMode=' + (
96        event.deltaMode == 0 ? 'PIXEL' :
97        event.deltaMode == 1 ? 'LINE' :
98        event.deltaMode == 2 ? 'PAGE' :
99        event.deltaMode);
100  }
101  if (event.type.toLowerCase().indexOf('pointer') != -1) {
102    msg += ', pointerType=' + event.pointerType + ', pointerId=' +
103        event.pointerId + ', width=' + round(event.width) +
104        ', height=' + round(event.height) + ', pressure=' +
105        round(event.pressure) + ', tiltX=' + round(event.tiltX) +
106        ', tiltY=' + round(event.tiltY);
107  }
108
109  msg = ' client=' + round(event.clientX) + ',' + round(event.clientY) +
110      ' screen=' + round(event.screenX) + ',' + round(event.screenY) +
111      ' button=' + event.button + ' buttons=' + event.buttons +
112      ' detail=' + event.detail + ' cancelable=' +
113      event.cancelable + msg;
114
115  preventDefault(event);
116  logEvent(event, msg);
117}
118
119// Helper function for touch handler.
120function makeTouchList(touches, verbose) {
121  var touchStr = '';
122  for (var i = 0; i < touches.length; i++) {
123    var tgt = '';
124    if (i > 0)
125      touchStr += ' ';
126
127    if (verbose)
128      tgt = '-' + touches[i].target.id;
129    var id = touches[i].identifier;
130    if (id >= 100) {
131      if (!(id in touchMap)) {
132        touchMap[id] = nextId;
133        nextId++;
134      }
135      id = '#' + touchMap[id];
136    }
137
138    touchStr += id + tgt;
139  }
140  return touchStr;
141}
142
143activeTouchData = {};
144
145// Touch event handler.
146function touchEventHandler(event) {
147  var touchStr =
148      ' touches=' + makeTouchList(event.touches, true) +
149      ' changed=' + makeTouchList(event.changedTouches) +
150      ' target=' + makeTouchList(event.targetTouches) +
151      ' cancelable=' + event.cancelable;
152
153  preventDefault(event);
154  logEvent(event, touchStr);
155
156  for (var i = 0; i < event.changedTouches.length; i++) {
157    var touch = event.changedTouches[i];
158
159    if (event.type == 'touchstart') {
160      var touchData = {
161        startTime: event.timeStamp,
162        startX: touch.screenX,
163        startY: touch.screenY,
164        maxDist: 0,
165        maxMDist: 0
166      };
167      activeTouchData[touch.identifier] = touchData;
168    } else {
169      var touchData = activeTouchData[touch.identifier];
170      var distX = Math.abs(touch.screenX - touchData.startX);
171      var distY = Math.abs(touch.screenY - touchData.startY);
172      touchData.maxDist = Math.max(touchData.maxDist,
173          Math.sqrt(distX * distX + distY * distY));
174      touchData.maxMDist = Math.max(touchData.maxMDist, distX + distY);
175      if (event.type == 'touchend') {
176        msg = ('touch ' + touch.identifier + ' summary:' +
177               ' dist=(' + distX + ',' + distY + ')' +
178               ' max-dist=' + Math.round(touchData.maxDist) +
179               ' max-manhattan-dist=' + touchData.maxMDist +
180               ' dur=' + (Math.round(event.timeStamp - touchData.startTime)));
181        logEvent(event, msg);
182        delete activeTouchData[touch.identifier];
183      }
184    }
185  }
186}
187
188// Key event handler.
189function keyEventHandler(event) {
190  var msg = '';
191  if ('charCode' in event)
192    msg += ' charCode=' + event.charCode;
193  if ('keyCode' in event)
194    msg += ' keyCode=' + event.keyCode;
195  if ('key' in event)
196    msg += ' key=' + event.key;
197  if ('code' in event)
198    msg += ' code=' + event.code;
199  if ('location' in event) {
200    if (event.location == KeyboardEvent.DOM_KEY_LOCATION_LEFT)
201      msg += ' LOCATION_LEFT';
202    else if (event.location == KeyboardEvent.DOM_KEY_LOCATION_NUMPAD)
203      msg += ' LOCATION_NUMPAD';
204    else if (event.location == KeyboardEvent.DOM_KEY_LOCATION_RIGHT)
205      msg += ' LOCATION_RIGHT';
206  }
207  if (event.repeat)
208    msg += ' repeat';
209  if (event.isComposing)
210    msg += ' isComposing';
211
212  preventDefault(event);
213  logEvent(event, msg);
214}
215
216
217// On load, set handlers for mouse, touch, and key events.
218function onLoad() {
219  setHandlerState(
220      ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup',
221      'mouseover', 'mousemove', 'mouseout', 'mouseenter', 'mouseleave',
222      'mousewheel', 'wheel'],
223      mouseEventHandler);
224
225  setHandlerState(
226      ['dragstart', 'dragenter', 'dragleave', 'drop', 'dragend'],
227      mouseEventHandler);
228
229  setHandlerState(
230      ['touchstart', 'touchmove', 'touchend', 'touchcancel'],
231      touchEventHandler);
232
233  setHandlerState(
234      ['keydown', 'keyup', 'keypress'],
235      keyEventHandler);
236
237  pageReady = true;
238}
239
240</script>
241</head>
242<body onload="onLoad()">
243</body>
244</html>
245