fixes

iliakan · iliakan · commit 1e4e3a8b6df8 · 2016-02-18T23:31:35.000+03:00
diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/solution.js
@@ -1,11 +1,11 @@
 function removeClass(obj, cls) {
   var classes = obj.className.split(' ');
 
-  for (i = 0; i < classes.length; i++) {
+  for (var i = 0; i < classes.length; i++) {
     if (classes[i] == cls) {
       classes.splice(i, 1); // удалить класс  
       i--;
     }
   }
   obj.className = classes.join(' ');
-}
+}
diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/solution.md b/1-js/4-data-structures/8-array-methods/3-remove-class/solution.md
@@ -5,7 +5,7 @@
 function removeClass(obj, cls) {
   var classes = obj.className.split(' ');
 
-  for (i = 0; i < classes.length; i++) {
+  for (var i = 0; i < classes.length; i++) {
     if (classes[i] == cls) {
       classes.splice(i, 1); // удалить класс  
 *!*
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
@@ -1,3 +1,5 @@
+'use strict';
+
 function HoverIntent(options) {
 
   options = Object.create(options); // not to modify the object
@@ -16,7 +18,11 @@ function HoverIntent(options) {
   var isHover;
 
   // A private function for handling mouse 'hovering'
-  elem.addEventListener("mouseover", function(event) {
+  elem.addEventListener("mouseover", onMouseOver);
+
+  elem.addEventListener("mouseout", onMouseOut);
+
+  function onMouseOver(event) {
 
     if (isOverElement) {
       // если мы и так над элементом, то это всплывший переход внутри него
@@ -27,41 +33,52 @@ function HoverIntent(options) {
     isOverElement = true;
 
     // при каждом движении мыши mousemove мы будем вычислять расстояние между
-    // предыдущими и текущими координатами курсора 
+    // предыдущими и текущими координатами курсора
     // если оно меньше sensivity, то скорость маленькая и это наведение на элемент
     // pX, pY - "предыдущие" координаты
     pX = event.pageX;
     pY = event.pageY;
     pTime = Date.now();
 
     elem.addEventListener('mousemove', onMouseMove);
-  });
-
-  elem.addEventListener("mouseout", function(event) {
+    checkSpeedInterval = setInterval(trackSpeed, options.interval);
+  }
+  
+  function onMouseOut(event) {
     // если ушли вовне элемента
-    if (event.relatedTarget && !elem.contains(event.relatedTarget)) {
+    if (!event.relatedTarget || !elem.contains(event.relatedTarget)) {
       isOverElement = false;
       elem.removeEventListener('mousemove', onMouseMove);
+      clearInterval(checkSpeedInterval);
       if (isHover) {
         // если была остановка над элементом
         options.out.call(elem, event);
         isHover = false;
       }
     }
-  });
+  }
 
   function onMouseMove(event) {
     cX = event.pageX;
     cY = event.pageY;
     cTime = Date.now();
+  }
+  
+  function trackSpeed() {
 
-    if (pTime == cTime) return; // когда mousemove вместе с mouseover
-
-    var speed = Math.sqrt(Math.pow(pX - cX, 2) + Math.pow(pY - cY, 2)) / (cTime - pTime);
+    let speed;
+    
+    if (!cTime || cTime == pTime) {
+      // нет измерений скорости (событий mousemove)
+      // значит курсор не двигался
+      speed = 0;
+    } else {
+      speed = Math.sqrt(Math.pow(pX - cX, 2) + Math.pow(pY - cY, 2)) / (cTime - pTime);
+    }
 
     if (speed < options.sensitivity) {
       // если с предыдущей позиции меньше sensivity дистанция, то "остановка на элементе"
-      elem.removeEventListener("mousemove", onMouseMove);
+      clearInterval(checkSpeedInterval);
       isHover = true;
       options.over.call(elem, event);
     } else {
@@ -71,5 +88,11 @@ function HoverIntent(options) {
       pTime = cTime;
     }
   }
+  
+  this.destroy = function() {
+    elem.removeEventListener('mousemove', onMouseMove);
+    elem.removeEventListener('mouseover', onMouseOver);
+    elem.removeEventListener('mouseout', onMouseOut);
+  };
 
-}
+}
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
@@ -1,43 +1,39 @@
 <!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="test.js"></script>
 </head>
 
 <body>
 
-
   <div id="elem" class="clock">
     <span class="hours">12</span> :
     <span class="minutes">30</span> :
     <span class="seconds">00</span>
   </div>
 
-  <script>
-    var tooltip = document.createElement('div');
-    tooltip.className = "tooltip";
-    tooltip.innerHTML = "Подсказка";
-
-    new HoverIntent({
-      elem: elem,
-      over: function() {
-        tooltip.style.left = this.getBoundingClientRect().left + 'px';
-        tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
-        document.body.appendChild(tooltip);
-      },
-      out: function() {
-        document.body.removeChild(tooltip);
-      }
-    });
-  </script>
-
-
+  <div id="tooltip" hidden>Tooltip</div>
 
+  <script>
+    // for the demo
+    setTimeout(function() {
+      new HoverIntent({
+        elem: elem,
+        over: function() {
+          tooltip.hidden = false;
+        },
+        out: function() {
+          tooltip.hidden = true;
+        }
+      });
+    }, 2000);
+  </script>   
 
 </body>
 
-</html>
+</html>
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
@@ -14,13 +14,15 @@
   border: 1px dashed black;
   padding: 5px;
   display: inline-block;
-  margin: 30px;
   background: yellow;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
 .tooltip {
   position: absolute;
   background: #eee;
   border: 1px brown solid;
   padding: 3px;
-}
+}
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
@@ -0,0 +1,98 @@
+'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 -> immediately no tooltip", function() {
+    mouse('mouseover', 10, 10);
+    assert.isFalse(isOver);
+  });
+  
+  it("mouseover -> pause shows tooltip", function() {
+    mouse('mouseover', 10, 10);
+    this.clock.tick(100);
+    assert.isTrue(isOver);
+  });
+
+  it("mouseover -> fast mouseout no 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/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html
@@ -17,11 +17,8 @@
     <span class="seconds">00</span>
   </div>
 
+  <div id="tooltip" hidden>Tooltip</div>
   <script>
-    var tooltip = document.createElement('div');
-    tooltip.className = "tooltip";
-    tooltip.innerHTML = "Подсказка";
-
     new HoverIntent({
       elem: elem,
       over: function() {
diff --git a/4-ajax/5-xhr-crossdomain/article.md b/4-ajax/5-xhr-crossdomain/article.md
@@ -82,7 +82,7 @@ xhr.send();
 
 Аналогично, злой хакер и ранее мог на своей странице объявить и, при помощи JavaScript, отправить HTML-форму с методом GET/POST и кодировкой `multipart/form-data`. А значит, даже старый сервер наверняка предусматривает возможность таких атак и умеет от них защищаться.
 
-А вот запросы с нестандартными заголовками или с методом `DELETE` таким образом не создать. Поэтому старый сервер может быть к ним не готов. Или, к примеру, он может полагать, что такие запросы веб-страница в принципе не умеет присылать, значит они пришли из привелигированного приложения, и дать им слишком много прав.
+А вот запросы с нестандартными заголовками или с методом `DELETE` таким образом не создать. Поэтому старый сервер может быть к ним не готов. Или, к примеру, он может полагать, что такие запросы веб-страница в принципе не умеет присылать, значит они пришли из привилегированного приложения, и дать им слишком много прав.
 
 Поэтому при посылке "непростых" запросов нужно специальным образом спросить у сервера, согласен ли он в принципе на подобные кросс-доменные запросы или нет? И, если сервер не ответит, что согласен -- значит, нет.
 

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,11 @@`
`1`	`1`	`function removeClass(obj, cls) {`
`2`	`2`	`var classes = obj.className.split(' ');`
`3`	`3`
`4`		`- for (i = 0; i < classes.length; i++) {`
	`4`	`+ for (var i = 0; i < classes.length; i++) {`
`5`	`5`	`if (classes[i] == cls) {`
`6`	`6`	`classes.splice(i, 1); // удалить класс`
`7`	`7`	`i--;`
`8`	`8`	`}`
`9`	`9`	`}`
`10`	`10`	`obj.className = classes.join(' ');`
`11`		`-}`
	`11`	`+}`