diff --git a/10-regular-expressions-javascript/14-regexp-lookahead/article.md b/10-regular-expressions-javascript/14-regexp-lookahead/article.md new file mode 100644 index 00000000..70484b7d --- /dev/null +++ b/10-regular-expressions-javascript/14-regexp-lookahead/article.md @@ -0,0 +1,3 @@ +# Lookahead (in progress) + +The article is under development, will be here when it's ready. diff --git a/2-ui/2-events/5-event-delegation/3-sort-table/solution.view/index.html b/2-ui/2-events/5-event-delegation/3-sort-table/solution.view/index.html index 9816ec85..d5d2d640 100755 --- a/2-ui/2-events/5-event-delegation/3-sort-table/solution.view/index.html +++ b/2-ui/2-events/5-event-delegation/3-sort-table/solution.view/index.html @@ -87,7 +87,7 @@ break; } - // сортировать + // sort rowsArray.sort(compare); tbody.append(...rowsArray); diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html index 544eb186..acc466f7 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html @@ -78,11 +78,12 @@ } document.onmouseout = function() { - // возможно такое, что mouseout сработал, а мы все еще внутри элемента (всплытие) - // но в этом случае сразу же будет и mouseover, - // то есть подсказка будет уничтожена и тут же показана заново + // it is possible that mouseout triggered, but we're still inside the element (cause of bubbling) + // 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 if (tooltip) { tooltip.remove(); tooltip = false; 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 ca1ac04c..a78c7c55 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 @@ -58,7 +58,7 @@ class HoverIntent { this.elem.removeEventListener('mousemove', this.onMouseMove); clearInterval(this.checkSpeedInterval); if (this.isHover) { - // если была остановка над элементом + // if there was a stop over the element this.out.call(this.elem, event); this.isHover = false; } diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index 3fdde9ed..3b6f7277 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md @@ -171,16 +171,17 @@ Here's the full example with all details: [codetabs height=380 src="mouseenter-mouseleave-delegation-2"] -Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't better. Only `` as a whole is highlighted unlike the example before. +Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't better. Only `` as a whole is highlighted unlike the example before. ``` -## Итого +## Summary -У `mouseover, mousemove, mouseout` есть следующие особенности: +We covered events `mouseover`, `mouseout`, `mousemove`, `mouseenter` and `mouseleave`. -- При быстром движении мыши события `mouseover, mousemove, mouseout` могут пропускать промежуточные элементы. -- События `mouseover` и `mouseout` -- единственные, у которых есть вторая цель: `relatedTarget` (`toElement/fromElement` в IE). -- События `mouseover/mouseout` подразумевают, что курсор находится над одним, самым глубоким элементом. Они срабатывают при переходе с родительского элемента на дочерний. +Things that are good to note: -События `mouseenter/mouseleave` не всплывают и не учитывают переходы внутри элемента. +- A fast mouse move can make `mouseover, mousemove, mouseout` to skip intermediate elements. +- Events `mouseover/out` and `mouseenter/leave` have an additional target: `relatedTarget`. That's the element that we are coming from/to, complementary to `target`. +- Events `mouseover/out` trigger even when we go from the parent element to a child element. They assume that the mouse can be only over one element at one time -- the deepest one. +- Events `mouseenter/leave` do not bubble and do not trigger when the mouse goes to a child element. They only track whether the mouse comes inside and outside the element as a whole. diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html index 7de45fc4..e129ee6a 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html @@ -70,5 +70,4 @@ - - \ No newline at end of file + diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js index c35051a0..9f6bf1b5 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js @@ -1,46 +1,38 @@ -// элемент TD, внутри которого сейчас курсор -var currentElem = null; +// under the mouse right now (if any) +let currentElem = null; table.onmouseover = function(event) { if (currentElem) { - // перед тем, как зайти в новый элемент, курсор всегда выходит из предыдущего - // - // если мы еще не вышли, значит это переход внутри элемента, отфильтруем его + // before entering a new element, the mouse always leaves the previous one + // if we didn't leave yet, then we're still inside it, so can ignore the event return; } - // посмотрим, куда пришёл курсор - var target = event.target; + let target = event.target.closest('td'); + if (!target || !table.contains(target)) return; - // уж не на TD ли? - while (target != this) { - if (target.tagName == 'TD') break; - target = target.parentNode; - } - if (target == this) return; - - // да, элемент перешёл внутрь TD! + // yeah we're inside now currentElem = target; target.style.background = 'pink'; }; table.onmouseout = function(event) { - // если курсор и так снаружи - игнорируем это событие + // if we're outside of any now, then ignore the event if (!currentElem) return; - // произошёл уход с элемента - проверим, куда, может быть на потомка? - var relatedTarget = event.relatedTarget; - if (relatedTarget) { // может быть relatedTarget = null + // we're leaving the element -- where to? Maybe to a child element? + let relatedTarget = event.relatedTarget; + if (relatedTarget) { // possible: relatedTarget = null while (relatedTarget) { - // идём по цепочке родителей и проверяем, - // если переход внутрь currentElem - игнорируем это событие + // go up the parent chain and check -- if we're still inside currentElem + // then that's an internal transition -- ignore it if (relatedTarget == currentElem) return; relatedTarget = relatedTarget.parentNode; } } - // произошло событие mouseout, курсор ушёл + // we left the element. really. currentElem.style.background = ''; currentElem = null; -}; \ No newline at end of file +}; diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html index 472120e4..209d9e6b 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html @@ -69,11 +69,11 @@ - + - \ No newline at end of file + diff --git a/2-ui/3-event-details/5-keyboard-events/head.html b/2-ui/3-event-details/5-keyboard-events/head.html deleted file mode 100644 index 17b273b3..00000000 --- a/2-ui/3-event-details/5-keyboard-events/head.html +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/2-ui/3-event-details/index.md b/2-ui/3-event-details/index.md index 49b7cf96..f5d7ca8b 100644 --- a/2-ui/3-event-details/index.md +++ b/2-ui/3-event-details/index.md @@ -1,5 +1,3 @@ -# События в деталях +# Events in details -В этом разделе мы разбираем конкретные события и особенности работы с ними. - -Вы можете читать его в любом порядке или кратко просмотреть его и вернуться к конкретным событиям, когда они понадобятся. \ No newline at end of file +Here we cover most important events and details of working with them. diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md index 505bd82b..2c20ddfd 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -246,7 +246,7 @@ For instance: ```js let option = new Option("Text", "value"); -// creates +// creates ``` The same element selected: diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md index 8fd4d7c8..d8ed3235 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -42,7 +42,8 @@ Your email please: }; *!*input.onfocus*/!* = function() { - if (this.classList.contains('invalid')) { // сбросить состояние "ошибка", если оно есть + if (this.classList.contains('invalid')) { + // remove the "error" indication, because the user wants to re-enter something this.classList.remove('invalid'); error.innerHTML = ""; } diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md index c5b09589..784ce7ee 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md @@ -18,7 +18,7 @@ Requirements: - When the form is shown, the focus should be inside the `` for the user. - Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements. -Пример использования: +Usage example: ```js showPrompt("Enter something
...smart :)", function(value) {