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

Last changes

Browse source
This commit is contained in:
Volodymyr Shevchuk 2021-05-03 15:15:32 +03:00
parent b24b05d3ca
commit fdc015e1fa
8 changed files with 59 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

2
1-js/02-b/1-b1/2-hoverintent/solution/hoverIntent.js
View file

@ -1,4 +1,4 @@
class HoverIntent {
export default class HoverIntent {
constructor({
sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"

5
1-js/02-b/1-b1/2-hoverintent/source/hoverIntent.js
View file

@ -1,6 +1,6 @@
// Here's a brief sketch of the class
// with things that you'll need anyway
class HoverIntent {
export default class HoverIntent {
constructor({
sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
@ -25,12 +25,9 @@ class HoverIntent {
elem.addEventListener("mouseout", this.onMouseOut);
// continue from this point
}
onMouseOver(event) {
console.error(console.log);
console.log("OVER", event);
/* ... */
}

7
1-js/02-b/1-b1/2-hoverintent/source/index.html
View file

@ -1,5 +1,4 @@
<link rel="stylesheet" href="style.css">
<script src="hoverIntent.js"></script>
<div id="elem" class="clock">
<span class="hours">12</span> :
@ -9,7 +8,9 @@
<div id="tooltip" hidden>Tooltip</div>
<script>
<script type="module">
import HoverIntent from './hoverIntent.js';
new HoverIntent({
elem,
over() {
@ -21,4 +22,4 @@
tooltip.hidden = true;
}
});
</script>
</script>

22
1-js/02-b/1-b1/2-hoverintent/source/index.spec.html Executable file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine.css">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/9.0.3/sinon.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/boot.js"></script>
<link rel="stylesheet" href="style.css">
<script type="module" src="test.js"></script>
<div id="elem" class="clock">
<span class="hours">12</span> :
<span class="minutes">30</span> :
<span class="seconds">00</span>
</div>
<div id="tooltip" hidden>Tooltip</div>

30
1-js/02-b/1-b1/2-hoverintent/source/test.js
View file

@ -1,5 +1,6 @@
describe("hoverIntent", function() {
import HoverIntent from './hoverIntent.js';
describe("hoverIntent", function() {
function mouse(eventType, x, y, options) {
let eventOptions = Object.assign({
bubbles: true,
@ -16,14 +17,15 @@ describe("hoverIntent", function() {
let isOver;
let hoverIntent;
let clock;
before(function() {
this.clock = sinon.useFakeTimers();
beforeAll(function() {
clock = jasmine.clock().install();
});
after(function() {
this.clock.restore();
afterAll(function() {
clock.uninstall();
});
@ -49,13 +51,13 @@ describe("hoverIntent", function() {
it("mouseover -> when the pointer just arrived, no tooltip", function() {
mouse('mouseover', 10, 10);
assert.isFalse(isOver);
expect(isOver).toBeFalse();
});
it("mouseover -> after a delay, the tooltip shows up", function() {
mouse('mouseover', 10, 10);
this.clock.tick(100);
assert.isTrue(isOver);
clock.tick(100);
expect(isOver).toBeTrue();
});
it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
@ -64,8 +66,8 @@ describe("hoverIntent", function() {
() => mouse('mouseout', 300, 300, { relatedTarget: document.body}),
30
);
this.clock.tick(100);
assert.isFalse(isOver);
clock.tick(100);
expect(isOver).toBeFalse();
});
@ -77,8 +79,8 @@ describe("hoverIntent", function() {
i
);
}
this.clock.tick(200);
assert.isTrue(isOver);
clock.tick(200);
expect(isOver).toBeTrue();
});
it("mouseover -> fast move -> no tooltip", function() {
@ -89,8 +91,8 @@ describe("hoverIntent", function() {
i
);
}
this.clock.tick(200);
assert.isFalse(isOver);
clock.tick(200);
expect(isOver).toBeTrue();
});
});