Add testing modes + different mouse types;
This commit is contained in:
parent
28602d3501
commit
b6ae13bf80
86
index.html
86
index.html
@ -114,8 +114,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
const WAIT_TIMEOUT = 3000;
|
|
||||||
|
|
||||||
// x=0 ---->
|
// x=0 ---->
|
||||||
// y=0
|
// y=0
|
||||||
// |
|
// |
|
||||||
@ -127,40 +125,23 @@
|
|||||||
// Values in pixels.
|
// Values in pixels.
|
||||||
const START_BUTTON_HEIGHT = 100;
|
const START_BUTTON_HEIGHT = 100;
|
||||||
const START_BUTTON_WIDTH = 300;
|
const START_BUTTON_WIDTH = 300;
|
||||||
|
|
||||||
const BOX_WIDTH = 500;
|
const BOX_WIDTH = 500;
|
||||||
|
|
||||||
const BUTTON_Y_OFFSET_FROM_BOTTOM = 60;
|
const BUTTON_Y_OFFSET_FROM_BOTTOM = 60;
|
||||||
|
|
||||||
//document.onmousemove = function(event) {
|
//document.addEventListener('mousedown', function(event) {
|
||||||
// console.log(`x=${event.pageX}, y=${event.pageY}`);
|
// console.log('document', event);
|
||||||
//}
|
//});
|
||||||
|
|
||||||
|
// Parameters that can be tweaked.
|
||||||
|
const WAIT_TIMEOUT = 8000;
|
||||||
|
const DISPATCH_ON_CANVAS = true;
|
||||||
|
const TEST_MODE = false;
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
let $canvas = document.getElementById("#canvas");
|
let $canvas = document.getElementById("#canvas");
|
||||||
|
|
||||||
document.addEventListener('mousedown', function(event) {
|
function dispatchOne(eventName, x, y) {
|
||||||
console.log(`onmousedown client x=${event.clientX}, y=${event.clientY}`);
|
let ev = new MouseEvent(eventName, {
|
||||||
console.log(`onmousedown page x=${event.pageX}, y=${event.pageY}`);
|
|
||||||
console.log(event);
|
|
||||||
});
|
|
||||||
|
|
||||||
let x = Math.max(0, (window.innerWidth - $canvas.width) / 2); // $canvas x offset
|
|
||||||
x = x + ($canvas.width - BOX_WIDTH) / 2; // box x offset
|
|
||||||
//let x = ($canvas.width - BOX_WIDTH) / 2;
|
|
||||||
x = x + (BOX_WIDTH - START_BUTTON_WIDTH) / 2; // left of start button
|
|
||||||
x = x + START_BUTTON_WIDTH / 2; // ~ middle of start button x
|
|
||||||
|
|
||||||
let y = (window.innerHeight - $canvas.height) / 2; // $canvas y offset
|
|
||||||
y = y + $canvas.height; // $canvas bottom
|
|
||||||
//let y = $canvas.height;
|
|
||||||
y = y - BUTTON_Y_OFFSET_FROM_BOTTOM; // start button bottom
|
|
||||||
y = y - START_BUTTON_HEIGHT / 2; // ~ middle of start button y
|
|
||||||
|
|
||||||
console.warn(`clicking x=${x}, y=${y}!`);
|
|
||||||
|
|
||||||
for (let name of ['mousedown', 'click']) {
|
|
||||||
let click = new MouseEvent(name, {
|
|
||||||
clientX: x,
|
clientX: x,
|
||||||
clientY: y,
|
clientY: y,
|
||||||
screenX: x,
|
screenX: x,
|
||||||
@ -170,9 +151,50 @@
|
|||||||
bubbles: true,
|
bubbles: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
document.dispatchEvent(click);
|
if (DISPATCH_ON_CANVAS) {
|
||||||
//$canvas.dispatchEvent(click);
|
$canvas.dispatchEvent(ev);
|
||||||
console.warn('click done');
|
} else {
|
||||||
|
document.dispatchEvent(ev);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let name of ['mousemove', 'mousedown', 'mouseup', 'click']) {
|
||||||
|
$canvas.addEventListener(name, function(event) {
|
||||||
|
console.log(name, event);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let x, y;
|
||||||
|
if (DISPATCH_ON_CANVAS) {
|
||||||
|
x = ($canvas.width - BOX_WIDTH) / 2; // box x offset
|
||||||
|
y = $canvas.height;
|
||||||
|
} else {
|
||||||
|
x = Math.max(0, (window.innerWidth - $canvas.width) / 2); // $canvas x offset
|
||||||
|
x = x + ($canvas.width - BOX_WIDTH) / 2; // box x offset
|
||||||
|
|
||||||
|
y = (window.innerHeight - $canvas.height) / 2; // $canvas y offset
|
||||||
|
y = y + $canvas.height; // $canvas bottom
|
||||||
|
}
|
||||||
|
|
||||||
|
x = x + (BOX_WIDTH - START_BUTTON_WIDTH) / 2; // left of start button
|
||||||
|
x = x + START_BUTTON_WIDTH / 2; // ~ middle of start button x
|
||||||
|
|
||||||
|
y = y - BUTTON_Y_OFFSET_FROM_BOTTOM; // start button bottom
|
||||||
|
y = y - START_BUTTON_HEIGHT / 2; // ~ middle of start button y
|
||||||
|
|
||||||
|
if (TEST_MODE) {
|
||||||
|
for (let eventName of ['mousedown', 'mousemove', 'mouseup', 'click']) {
|
||||||
|
for (let x = 0; x < $canvas.width; x += 10) {
|
||||||
|
for (let y = 0; y < $canvas.height; y += 10) {
|
||||||
|
dispatchOne(eventName, x, y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(`done with ${eventName}!`);
|
||||||
|
}
|
||||||
|
console.log('done with all click types')
|
||||||
|
} else {
|
||||||
|
console.warn(`clicking x=${x}, y=${y}!`);
|
||||||
|
dispatchOne('mousedown', x, y);
|
||||||
}
|
}
|
||||||
}, WAIT_TIMEOUT);
|
}, WAIT_TIMEOUT);
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user