diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js index 4e6e2a3e..44bd2745 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js @@ -1,5 +1,3 @@ -'use strict'; - class HoverIntent { constructor({ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html deleted file mode 100644 index 09823217..00000000 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - - - - - - -
- 12 : - 30 : - 00 -
- - - - - - - diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/style.css deleted file mode 100644 index fa2f09eb..00000000 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/style.css +++ /dev/null @@ -1,38 +0,0 @@ -.hours { - color: red; -} - -body { - margin: 0; -} - -.minutes { - color: green; -} - -.seconds { - color: blue; -} - -.clock { - border: 1px dashed black; - padding: 5px; - display: inline-block; - background: yellow; - position: absolute; - left: 0; - top: 0; -} - -#tooltip { - position: absolute; - padding: 10px 20px; - border: 1px solid #b3c9ce; - border-radius: 4px; - text-align: center; - font: italic 14px/1.3 sans-serif; - color: #333; - background: #fff; - z-index: 100000; - box-shadow: 3px 3px 3px rgba(0, 0, 0, .3); -} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js deleted file mode 100644 index f5d4aaff..00000000 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js +++ /dev/null @@ -1,98 +0,0 @@ -'use strict'; - -describe("hoverIntent", function() { - - function mouse(eventType, x, y, options) { - let eventOptions = Object.assign({ - bubbles: true, - clientX: x, - clientY: y, - pageX: x, - pageY: y, - target: elem - }, options || {}); - - elem.dispatchEvent(new MouseEvent(eventType, eventOptions)); - } - - - let isOver; - let hoverIntent; - - - before(function() { - this.clock = sinon.useFakeTimers(); - }); - - after(function() { - this.clock.restore(); - }); - - - beforeEach(function() { - isOver = false; - - hoverIntent = new HoverIntent({ - elem: elem, - over: function() { - isOver = true; - }, - out: function() { - isOver = false; - } - }); - }) - - afterEach(function() { - if (hoverIntent) { - hoverIntent.destroy(); - } - }) - - it("mouseover -> when the pointer just arrived, no tooltip", function() { - mouse('mouseover', 10, 10); - assert.isFalse(isOver); - }); - - it("mouseover -> after a delay, the tooltip shows up", function() { - mouse('mouseover', 10, 10); - this.clock.tick(100); - assert.isTrue(isOver); - }); - - it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() { - mouse('mouseover', 10, 10); - setTimeout( - () => mouse('mouseout', 300, 300, { relatedTarget: document.body}), - 30 - ); - this.clock.tick(100); - assert.isFalse(isOver); - }); - - - it("mouseover -> slow move -> tooltips", function() { - mouse('mouseover', 10, 10); - for(let i=10; i<200; i+= 10) { - setTimeout( - () => mouse('mousemove', i/5, 10), - i - ); - } - this.clock.tick(200); - assert.isTrue(isOver); - }); - - it("mouseover -> fast move -> no tooltip", function() { - mouse('mouseover', 10, 10); - for(let i=10; i<200; i+= 10) { - setTimeout( - () => mouse('mousemove', i, 10), - i - ); - } - this.clock.tick(200); - assert.isFalse(isOver); - }); - -}); diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js index a38b42bc..559d935b 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js @@ -1,5 +1,3 @@ -'use strict'; - // Here's a brief sketch of the class // with things that you'll need anyway class HoverIntent { diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html index 09823217..c1d30b66 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html @@ -1,37 +1,24 @@ - - + + - - - - - - - +
+ 12 : + 30 : + 00 +
- + -
- 12 : - 30 : - 00 -
- - - - - - - + \ No newline at end of file