-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (72 loc) · 2.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<title>Event Generator Playground</title>
<style>
#test {
border: #e00 1px solid;
width: 300px;
height: 300px;
cursor: crosshair;
}
#test.done {
border: #333 1px solid;
background-color: #999;
cursor: not-allowed;
}
#update {
width: 300px;
text-align: right;
}
</style>
<script src="event-generator.js"></script>
<script>
async function startEvents() {
const testPanel = document.getElementById('test');
testPanel.classList.remove('done');
testPanel.textContent = 'Click Here';
const updatePanel = document.getElementById('update');
// Subscribe to the click event
const clickEventIterator = eg(testPanel, 'click');
// Cancel button stops events from outside the iterator loops
const cancelButton = document.getElementById('cancel');
cancelButton.textContent = 'Cancel';
cancelButton.addEventListener('click', e => clickEventIterator.stop(), { once: true });
// Promise syntax with no await
const mouseEventIterator = eg(testPanel, 'mousemove');
mouseEventIterator.
each(e => updatePanel.textContent = `x: ${e.offsetX}, y: ${e.offsetY}`).
then(_ => updatePanel.textContent += ' stopped');
let maxClicks = 5;
try {
// For-await syntax with map()
for await (const e of clickEventIterator.map(e => ({ x: e.offsetX, y: e.offsetY }))) {
console.log('Clicked', e);
testPanel.textContent = `x: ${e.x}, y: ${e.y}, ${maxClicks} clicks left`;
if (maxClicks-- <= 0)
return; // Stop events from inside the loop
}
}
finally {
mouseEventIterator.stop();
console.log('Done');
testPanel.textContent = 'Stopped';
testPanel.classList.add('done');
cancelButton.textContent = 'Restart';
cancelButton.addEventListener('click', startEvents, { once: true });
}
}
document.addEventListener('DOMContentLoaded', startEvents);
</script>
</head>
<body>
<h1>Event Generator Playground</h1>
<p>Test page for playing around with event generators.</p>
<p>This page will only work in Chrome Canary with the <tt>--js-flags=--harmony-async-iteration</tt> command line switch.</p>
<div id="test">
Test Content
</div>
<div id="update">Mouseover the content above</div>
<button id="cancel">cancel</button>
</body>
</html>