github/puppeteer
0
0
Fork 0
mirror of https://github.com/puppeteer/puppeteer synced 2024-06-14 14:02:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mouse (#101)

Browse Source 
This patch:
- adds Mouse class which holds mouse state and implements mouse primitives,
such as moving, button down and button up.
- implements high-level mouse api, such as `page.click` and `page.hover`.

References #40, References #89
This commit is contained in:
JoelEinbinder
2017-07-21 20:29:31 -07:00
committed by Andrey Lushnikov
parent eb2cb67b0e
commit 98ee35655f
17 changed files with 458 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
test/assets/input/button.html
View File

@@ -4,6 +4,7 @@
<title>Button test</title>
</head>
<body>
<script src="mouse-helper.js"></script>
<button onclick="clicked();">Click target</button>
<script>
window.result = 'Was not clicked';

62
test/assets/input/mouse-helper.js Normal file
View File

@@ -0,0 +1,62 @@
// This injects a box into the page that moves with the mouse;
// Useful for debugging
(function(){
let box = document.createElement('div');
box.classList.add('mouse-helper');
let styleElement = document.createElement('style');
styleElement.innerHTML = `
.mouse-helper {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: rgba(0,0,0,.4);
border: 1px solid white;
border-radius: 10px;
margin-left: -10px;
margin-top: -10px;
transition: background .2s, border-radius .2s, border-color .2s;
}
.mouse-helper.button-1 {
transition: none;
background: rgba(0,0,0,0.9);
}
.mouse-helper.button-2 {
transition: none;
border-color: rgba(0,0,255,0.9);
}
.mouse-helper.button-3 {
transition: none;
border-radius: 4px;
}
.mouse-helper.button-4 {
transition: none;
border-color: rgba(255,0,0,0.9);
}
.mouse-helper.button-5 {
transition: none;
border-color: rgba(0,255,0,0.9);
}
`;
document.head.appendChild(styleElement);
document.body.appendChild(box);
document.addEventListener('mousemove', event => {
box.style.left = event.pageX + 'px';
box.style.top = event.pageY + 'px';
updateButtons(event.buttons);
}, true);
document.addEventListener('mousedown', event => {
updateButtons(event.buttons);
box.classList.add('button-' + event.which);
}, true);
document.addEventListener('mouseup', event => {
updateButtons(event.buttons);
box.classList.remove('button-' + event.which);
}, true);
function updateButtons(buttons) {
for (let i = 0; i < 5; i++)
box.classList.toggle('button-' + i, buttons & (1 << i));
}
})();

23
test/assets/input/scrollable.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Scrollable test</title>
</head>
<body>
<script src='mouse-helper.js'></script>
<script>
for (let i = 0; i < 100; i++) {
let button = document.createElement('button');
button.textContent = i + ': not clicked';
button.id = 'button-' + i;
button.onclick = () => button.textContent = 'clicked';
button.oncontextmenu = event => {
event.preventDefault();
button.textContent = 'context menu';
}
document.body.appendChild(button);
document.body.appendChild(document.createElement('br'));
}
</script>
</body>
</html>

1
test/assets/input/textarea.html
View File

@@ -5,6 +5,7 @@
</head>
<body>
<textarea></textarea>
<script src='mouse-helper.js'></script>
<script>
window.result = '';
let textarea = document.querySelector('textarea');