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

fixes #1653

Browse source
This commit is contained in:
Ilya Kantor 2019-12-04 12:10:57 +03:00
parent 4110f00f31
commit 5b195795da
5 changed files with 38 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

25
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html
View file

@ -20,20 +20,17 @@
<div id="tooltip" hidden>Tooltip</div> <div id="tooltip" hidden>Tooltip</div>
<script> <script>
// for the demo new HoverIntent({
setTimeout(function() { elem,
new HoverIntent({ over() {
elem, tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
over() { tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px'; tooltip.hidden = false;
tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px'; },
tooltip.hidden = false; out() {
}, tooltip.hidden = true;
out() { }
tooltip.hidden = true; });
}
});
}, 2000);
</script> </script>
</body> </body>

6
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js
View file

@ -49,18 +49,18 @@ describe("hoverIntent", function() {
} }
}) })
it("mouseover -> immediately no tooltip", function() { it("mouseover -> when the pointer just arrived, no tooltip", function() {
mouse('mouseover', 10, 10); mouse('mouseover', 10, 10);
assert.isFalse(isOver); assert.isFalse(isOver);
}); });
it("mouseover -> pause shows tooltip", function() { it("mouseover -> after a delay, the tooltip shows up", function() {
mouse('mouseover', 10, 10); mouse('mouseover', 10, 10);
this.clock.tick(100); this.clock.tick(100);
assert.isTrue(isOver); assert.isTrue(isOver);
}); });
it("mouseover -> fast mouseout no tooltip", function() { it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
mouse('mouseover', 10, 10); mouse('mouseover', 10, 10);
setTimeout( setTimeout(
() => mouse('mouseout', 300, 300, { relatedTarget: document.body}), () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),

1
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
View file

@ -45,6 +45,7 @@ class HoverIntent {
destroy() { destroy() {
/* your code to "disable" the functionality, remove all handlers */ /* your code to "disable" the functionality, remove all handlers */
/* it's needed for the tests to work */
} }
} }

25
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html
View file

@ -20,20 +20,17 @@
<div id="tooltip" hidden>Tooltip</div> <div id="tooltip" hidden>Tooltip</div>
<script> <script>
// for the demo new HoverIntent({
setTimeout(function() { elem,
new HoverIntent({ over() {
elem, tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
over() { tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px'; tooltip.hidden = false;
tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px'; },
tooltip.hidden = false; out() {
}, tooltip.hidden = true;
out() { }
tooltip.hidden = true; });
}
});
}, 2000);
</script> </script>
</body> </body>

24
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js
View file

@ -3,7 +3,7 @@
describe("hoverIntent", function() { describe("hoverIntent", function() {
function mouse(eventType, x, y, options) { function mouse(eventType, x, y, options) {
let eventOptions = Object.assign({ let eventOptions = Object.assign({
bubbles: true, bubbles: true,
clientX: x, clientX: x,
clientY: y, clientY: y,
@ -11,15 +11,15 @@ describe("hoverIntent", function() {
pageY: y, pageY: y,
target: elem target: elem
}, options || {}); }, options || {});
elem.dispatchEvent(new MouseEvent(eventType, eventOptions)); elem.dispatchEvent(new MouseEvent(eventType, eventOptions));
} }
let isOver; let isOver;
let hoverIntent; let hoverIntent;
before(function() { before(function() {
this.clock = sinon.useFakeTimers(); this.clock = sinon.useFakeTimers();
}); });
@ -27,11 +27,11 @@ describe("hoverIntent", function() {
after(function() { after(function() {
this.clock.restore(); this.clock.restore();
}); });
beforeEach(function() { beforeEach(function() {
isOver = false; isOver = false;
hoverIntent = new HoverIntent({ hoverIntent = new HoverIntent({
elem: elem, elem: elem,
over: function() { over: function() {
@ -49,18 +49,18 @@ describe("hoverIntent", function() {
} }
}) })
it("mouseover -> immediately no tooltip", function() { it("mouseover -> when the pointer just arrived, no tooltip", function() {
mouse('mouseover', 10, 10); mouse('mouseover', 10, 10);
assert.isFalse(isOver); assert.isFalse(isOver);
}); });
it("mouseover -> pause shows tooltip", function() { it("mouseover -> after a delay, the tooltip shows up", function() {
mouse('mouseover', 10, 10); mouse('mouseover', 10, 10);
this.clock.tick(100); this.clock.tick(100);
assert.isTrue(isOver); assert.isTrue(isOver);
}); });
it("mouseover -> fast mouseout no tooltip", function() { it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
mouse('mouseover', 10, 10); mouse('mouseover', 10, 10);
setTimeout( setTimeout(
() => mouse('mouseout', 300, 300, { relatedTarget: document.body}), () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),
@ -94,5 +94,5 @@ describe("hoverIntent", function() {
this.clock.tick(200); this.clock.tick(200);
assert.isFalse(isOver); assert.isFalse(isOver);
}); });
}); });