jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-18 14:46:13 +03:00
parent 1f61c2ab1d
commit af0ee2a49e
66 changed files with 12263 additions and 2059 deletions
Download patch file Download diff file Expand all files Collapse all files

6
2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md Normal file
View file

@ -0,0 +1,6 @@
We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then then `mouse.onkeydown` to handle arrow keys.
The only pitfall is that `keydown` only triggers on elements with focus. So we need to add `tabindex` to the element. As we're forbidden to change HTML, we can use `mouse.tabIndex` property for that.
P.S. We also can replace `mouse.onclick` with `mouse.onfocus`.

66
2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.view/index.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#mouse {
display: inline-block;
cursor: pointer;
margin: 0;
}
#mouse:focus {
outline: 1px dashed black;
}
</style>
</head>
<body>
<p>Click on the mouse and move it with arrow keys.</p>
<pre id="mouse">
_ _
(q\_/p)
/. .\
=\_t_/= __
/ \ (
(( )) )
/\) (/\ /
\ Y /-'
nn^nn
</pre>
<script>
mouse.tabIndex = 0;
mouse.onclick = function() {
this.style.left = this.getBoundingClientRect().left + 'px';
this.style.top = this.getBoundingClientRect().top + 'px';
this.style.position = 'fixed';
};
mouse.onkeydown = function(e) {
switch (e.key) {
case 'ArrowLeft':
this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
return false;
case 'ArrowUp':
this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
return false;
case 'ArrowRight':
this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
return false;
case 'ArrowDown':
this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
return false;
}
};
</script>
</body>
</html>

42
2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/source.view/index.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#mouse {
display: inline-block;
cursor: pointer;
margin: 0;
}
#mouse:focus {
outline: 1px dashed black;
}
</style>
</head>
<body>
<p>Click on the mouse and move it with arrow keys.</p>
<pre id="mouse">
_ _
(q\_/p)
/. .\
=\_t_/= __
/ \ (
(( )) )
/\) (/\ /
\ Y /-'
nn^nn
</pre>
<script>
// ...your code...
</script>
</body>
</html>

12
2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md Normal file
View file

@ -0,0 +1,12 @@
importance: 4
---
# Keyboard-driven mouse
Focus on the mouse. Then use arrow keys to move it:
[demo src="solution"]
P.S. Don't put event handlers anywhere except the `#mouse` element.
P.P.S. Don't modify HTML/CSS, the approach should be generic and work with any element.