Merge pull request #240 from vplentinax/sync-ui-event-details

sync-ui-event-details

Author: vplentinax

2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md

@@ -14,4 +14,5 @@ The demo:
 [iframe border="1" src="solution" height=180]
 
 P.S. For this task we can assume that list items are text-only. No nested tags.
+
 P.P.S. Prevent the native browser selection of the text on clicks.

2-ui/3-event-details/1-mouse-events-basics/article.md

@@ -4,25 +4,28 @@
 
   function showmesg(t, form) {
 
-     if (timer==0) timer = new Date()
+     if (timer == 0) {
+       timer = new Date();
+     }
+
+     let tm = new Date();
 
-     let tm = new Date()
-     if (tm-timer > 300) {
-  	t = '------------------------------\n'+t
+     if (tm - timer > 300) {
+       t = '------------------------------\n' + t;
      }
 
-     let area = document.forms[form+'form'].getElementsByTagName('textarea')[0]
+     let area = document.forms[form + 'form'].getElementsByTagName('textarea')[0];
 
      area.value += t + '\n';
-     area.scrollTop = area.scrollHeight
+     area.scrollTop = area.scrollHeight;
 
-     timer = tm
+     timer = tm;
   }
 
   function logMouse(e) {
      let evt = e.type;
      while (evt.length < 11) evt += ' ';
-     showmesg(evt+" which="+e.which, 'test')
+     showmesg(evt + " button=" + e.button, 'test')
      return false;
   }
 

2-ui/3-event-details/1-mouse-events-basics/head.html

@@ -78,12 +78,13 @@
     }
 
     document.onmouseout = function() {
-      // it is possible that mouseout triggered, but we're still inside the element (cause of bubbling)
+      // it is possible that mouseout triggered, but we're still inside the element
+      // (its target was inside, and it bubbled)
       // but in this case we'll have an immediate mouseover,
       // so the tooltip will be destroyed and shown again
       //
-      // that's an overhead, but here it's not visible
-      // can be fixed with additional checks
+      // luckily, the "blinking" won't be visible,
+      // as both events happen almost at the same time
       if (tooltip) {
         tooltip.remove();
         tooltip = false;

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html

@@ -4,10 +4,12 @@ importance: 5
 
 # Improved tooltip behavior
 
-Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`.
+Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text.
 
 That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
 
+Only one tooltip may show up at the same time.
+
 For instance:
 
 ```html
@@ -21,5 +23,3 @@ For instance:
 The result in iframe:
 
 [iframe src="solution" height=300 border=1]
-
-P.S. Hint: only one tooltip may show up at the same time.

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md

@@ -3,16 +3,16 @@ The algorithm looks simple:
 1. Put `onmouseover/out` handlers on the element. Also can use `onmouseenter/leave` here, but they are less universal, won't work if we introduce delegation.
 2. When a mouse cursor entered the element, start measuring the speed on `mousemove`.
 3. If the speed is slow, then run `over`.
-4. Later if we're out of the element, and `over` was executed, run `out`.
+4. When we're going out of the element, and `over` was executed, run `out`.
 
-The question is: "How to measure the speed?"
+But how to measure the speed?
 
-The first idea would be: to run our function every `100ms` and measure the distance between previous and new coordinates. If it's small, then the speed is small.
+The first idea can be: run a function every `100ms` and measure the distance between previous and new coordinates. If it's small, then the speed is small.
 
 Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
 
-The only way to get coordinates is to listen to mouse events, like `mousemove`.
+The only way to get coordinates is to listen for mouse events, like `mousemove`, and take coordinates from the event object.
 
-So we can set a handler on `mousemove` to track coordinates and remember them. Then we can compare them, once per `100ms`.
+So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per `100ms`.
 
 P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md

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

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

@@ -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);
     assert.isFalse(isOver);
   });
 
-  it("mouseover -> pause shows tooltip", function() {
+  it("mouseover -> after a delay, the tooltip shows up", function() {
     mouse('mouseover', 10, 10);
     this.clock.tick(100);
     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);
     setTimeout(
       () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),

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

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

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

@@ -1,12 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html>
 
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
   <link rel="stylesheet" href="style.css">
   <script src="hoverIntent.js"></script>
-  <script src="https://js.cx/test/libs.js"></script>
+  <script src="https://en.js.cx/test/libs.js"></script>
   <script src="test.js"></script>
 </head>
 
@@ -21,18 +20,17 @@
   <div id="tooltip" hidden>Tooltip</div>
 
   <script>
-    // for the demo
-    setTimeout(function() {
-      new HoverIntent({
-        elem,
-        over() {
-          tooltip.hidden = false;
-        },
-        out() {
-          tooltip.hidden = true;
-        }
-      });
-    }, 2000);
+    new HoverIntent({
+      elem,
+      over() {
+        tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
+        tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
+        tooltip.hidden = false;
+      },
+      out() {
+        tooltip.hidden = true;
+      }
+    });
   </script>
 
 </body>