up

Author: iliakan

2-ui/2-events/7-default-browser-action/1-why-return-false-fails/solution.md

@@ -1,16 +1,16 @@
-Дело в том, что обработчик из атрибута `onclick` делается браузером как функция с заданным телом.
+When the browser reads the `on*` attribute like `onclick`, it creates the handler from its content.
 
-То есть, в данном случае он будет таким:
+For `onclick="handler()"` the function will be:
 
 ```js
 function(event) {
-  handler() // тело взято из атрибута onclick
+  handler() // the content of onclick
 }
 ```
 
-При этом возвращаемое `handler` значение никак не используется и не влияет на результат.
+Now we can see that the value returned by `handler()` is not used and does not affect the result.
 
-Рабочий вариант:
+The fix is simple:
 
 ```html run
 <script>
@@ -23,7 +23,7 @@ function(event) {
 <a href="http://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
 ```
 
-Также можно использовать объект события для вызова `event.preventDefault()`, например:
+Also we can use `event.preventDefault()`, like this:
 
 ```html run
 <script>
@@ -37,4 +37,3 @@ function(event) {
 
 <a href="http://w3.org" onclick="*!*handler(event)*/!*">w3.org</a>
 ```
-

2-ui/2-events/7-default-browser-action/1-why-return-false-fails/task.md

@@ -2,9 +2,9 @@ importance: 3
 
 ---
 
-# Почему не работает return false?
+# Why "return false" doesn't work?
 
-Почему в этом документе `return false` не работает?
+Why in the code below `return false` doesn't work at all?
 
 ```html autorun run
 <script>
@@ -14,9 +14,9 @@ importance: 3
   }
 </script>
 
-<a href="http://w3.org" onclick="handler()">w3.org</a>
+<a href="http://w3.org" onclick="handler()">the browser will go to w3.org</a>
 ```
 
-По замыслу, переход на `w3.org` при клике должен отменяться. Однако, на самом деле он происходит.
+The browser follows the URL on click, but we don't want it.
 
-В чём дело и как поправить?
+How to fix?

2-ui/2-events/7-default-browser-action/2-catch-link-navigation/solution.md

@@ -1,28 +1,5 @@
-Это -- классическая задача на тему делегирования.
+That's a great use of the event delegation pattern.
 
-В реальной жизни, мы можем перехватить событие и создать AJAX-запрос к серверу, который сохранит информацию о том, по какой ссылке ушел посетитель.
-
-Мы перехватываем событие на `contents` и поднимаемся до `parentNode` пока не получим `A` или не упремся в контейнер.
-
-```js
-contents.onclick = function(evt) {
-  var target = evt.target;
-
-  function handleLink(href) {
-    var isLeaving = confirm('Уйти на ' + href + '?');
-    if (!isLeaving) return false;
-  }
-
-  while (target != this) {
-    if (target.nodeName == 'A') {
-*!*
-      return handleLink(target.getAttribute('href')); // (*)
-*/!*
-    }
-    target = target.parentNode;
-  }
-};
-```
-
-В строке `(*)` используется атрибут, а не свойство `href`, чтобы показать в `confirm` именно то, что написано в HTML-атрибуте, так как свойство может отличаться, оно обязано содержать полный валидный адрес.
+In real life instead of asking we can send a "logging" request to the server that saves the information about where the visitor left. Or we can load the content and show it right in the page (if allowable).
 
+All we need is to catch the `contents.onclick` and use `confirm` to ask the user. A good idea would be to use `link.getAttribute('href')` instead of `link.href` for the URL. See the solution for details.

2-ui/2-events/7-default-browser-action/2-catch-link-navigation/solution.view/index.html

@@ -16,28 +16,25 @@
   <fieldset id="contents">
     <legend>#contents</legend>
     <p>
-      Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
+      How about to read <a href="http://wikipedia.org">Wikipedia</a> or visit <a href="http://w3.org"><i>W3.org</i></a> and learn about modern standards?
     </p>
   </fieldset>
 
   <script>
-    document.getElementById('contents').onclick = function(event) {
+    contents.onclick = function(event) {
 
       function handleLink(href) {
-        var isLeaving = confirm('Уйти на ' + href + '?');
+        let isLeaving = confirm(`Leave for ${href}?`);
         if (!isLeaving) return false;
       }
 
-      var target = event.target;
+      let target = event.target.closest('a');
 
-      while (target != this) {
-        if (target.nodeName == 'A') {
-          return handleLink(target.getAttribute('href'));
-        }
-        target = target.parentNode;
+      if (target && contents.contains(target)) {
+        return handleLink(target.getAttribute('href'));
       }
-    }
+    };
   </script>
+  
 </body>
-
-</html>
+</html>

2-ui/2-events/7-default-browser-action/2-catch-link-navigation/source.view/index.html

@@ -16,10 +16,9 @@
   <fieldset id="contents">
     <legend>#contents</legend>
     <p>
-      Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
+      How about to read <a href="http://wikipedia.org">Wikipedia</a> or visit <a href="http://w3.org"><i>W3.org</i></a> and learn about modern standards?
     </p>
   </fieldset>
 
 </body>
-
-</html>
+</html>

2-ui/2-events/7-default-browser-action/2-catch-link-navigation/task.md

@@ -2,16 +2,15 @@ importance: 5
 
 ---
 
-# Поймайте переход по ссылке
+# Catch links in the element
 
-Сделайте так, чтобы при клике на ссылки внутри элемента `#contents` пользователю выводился вопрос о том, действительно ли он хочет покинуть страницу и если он не хочет, то прерывать переход по ссылке.
+Make all links inside the element with `id="contents"` ask the user if he really wants to leave. And if he doesn't then don't follow.
 
-Так это должно работать:
+Like this:
 
 [iframe height=100 border=1 src="solution"]
 
-Детали:
-
-- Содержимое `#contents` может быть загружено динамически и присвоено при помощи  `innerHTML`. Так что найти все ссылки и поставить на них обработчики нельзя. Используйте делегирование.
-- Содержимое может содержать вложенные теги, *в том числе внутри ссылок*, например, `<a href=".."><i>...</i></a>`.
+Details:
 
+- HTML inside the element may be loaded or regenerated dynamically at any time, so we can't find all links and put handlers on them. Use the event delegation.
+- The content may have nested tags. Inside links too, like `<a href=".."><i>...</i></a>`.

2-ui/2-events/7-default-browser-action/3-image-gallery/solution.md

@@ -1,54 +1 @@
-Решение состоит в том, чтобы добавить обработчик на контейнер `#thumbs` и отслеживать клики на ссылках.
-
-Когда происходит событие, обработчик должен изменять `src` `#largeImg` на `href` ссылки и заменять `alt` на ее `title`.
-
-Код решения:
-
-```js
-var largeImg = document.getElementById('largeImg');
-
-document.getElementById('thumbs').onclick = function(e) {
-  var target = e.target;
-
-  while (target != this) {
-
-    if (target.nodeName == 'A') {
-      showThumbnail(target.href, target.title);
-      return false;
-    }
-
-    target = target.parentNode;
-  }
-
-}
-
-function showThumbnail(href, title) {
-  largeImg.src = href;
-  largeImg.alt = title;
-}
-```
-
-**Предзагрузка картинок**
-
-Для того, чтобы картинка загрузилась, достаточно создать новый элемент `IMG` и указать ему `src`, вот так:
-
-```js
-var imgs = thumbs.getElementsByTagName('img');
-for (var i = 0; i < imgs.length; i++) {
-  var url = imgs[i].parentNode.href;
-
-*!*
-  var img = document.createElement('img');
-  img.src = url;
-*/!*
-}
-```
-
-Как только элемент создан и ему назначен `src`, браузер сам начинает скачивать файл картинки.
-
-При правильных настройках сервера как-то использовать этот элемент не обязательно -- картинка уже закеширована.
-
-**Семантичная верстка**
-
-Для списка картинок используется `DIV`. С точки зрения семантики более верный вариант -- список `UL/LI`.
-
+The solution is to assign the handler to the container and track clicks. If a click is on the `<a>` link, then change `src` of `#largeImg` to the `href` of the thumbnail.

2-ui/2-events/7-default-browser-action/3-image-gallery/solution.view/index.html

@@ -2,69 +2,48 @@
 <html>
 
 <head>
-  <title>Галерея</title>
+  <title>Gallery</title>
   <link rel="stylesheet" href="gallery.css">
   <meta charset="utf-8">
 </head>
 
 <body>
 
-  <p><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
+  <p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
 
   <ul id="thumbs">
-    <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
+    <!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
     <li>
-      <a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
+      <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
+      <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
+      <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
+      <a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
+      <a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
     </li>
   </ul>
 
   <script>
-    var largeImg = document.getElementById('largeImg');
-
-    var thumbs = document.getElementById('thumbs');
-
-    thumbs.onclick = function(e) {
-      var target = e.target;
-
-      while (target != this) {
-
-        if (target.nodeName == 'A') {
-          showThumbnail(target.href, target.title);
-          return false;
-        }
-
-        target = target.parentNode;
-      }
+    thumbs.onclick = function(event) {
+      let thumbnail = event.target.closest('a');
 
+      if (!thumbnail) return;
+      showThumbnail(target.href, target.title);
+      event.preventDefault();
     }
 
     function showThumbnail(href, title) {
       largeImg.src = href;
       largeImg.alt = title;
     }
-
-
-    /* предзагрузка */
-    var imgs = thumbs.getElementsByTagName('img');
-    for (var i = 0; i < imgs.length; i++) {
-      var url = imgs[i].parentNode.href;
-      var img = document.createElement('img');
-      img.src = url;
-    }
   </script>
 
 </body>
-
-</html>
+</html>

2-ui/2-events/7-default-browser-action/3-image-gallery/source.view/index.html

@@ -2,24 +2,33 @@
 <html>
 
 <head>
-  <title>Галерея</title>
+  <title>Gallery</title>
   <link rel="stylesheet" href="gallery.css">
   <meta charset="utf-8">
 </head>
 
 <body>
 
-  <p><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
+  <p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
 
-  <div id="thumbs">
-    <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
-    <a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
-    <a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
-    <a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
-    <a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
-    <a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
-  </div>
+  <ul id="thumbs">
+    <!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
+    <li>
+      <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
+    </li>
+    <li>
+      <a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
+    </li>
+  </ul>
 
 </body>
-
-</html>
+</html>

2-ui/2-events/7-default-browser-action/3-image-gallery/task.md

@@ -2,19 +2,12 @@ importance: 5
 
 ---
 
-# Галерея изображений
+# Image gallery
 
-Создайте галерею изображений, в которой основное изображение изменяется при клике на уменьшенный вариант.
+Create an image gallery where the main image changes by the click on a thumbnail.
 
-Результат должен выглядеть так:
+Like this:
 
 [iframe src="solution" height=600]
 
-Для обработки событий используйте делегирование, т.е. не более одного обработчика.
-
-P.S. Обратите внимание -- клик может быть как на маленьком изображении `IMG`, так и на `A` вне него. При этом `event.target` будет, соответственно, либо `IMG`, либо `A`.
-
-Дополнительно:
-
-- Если получится -- сделайте предзагрузку больших изображений, чтобы при клике они появлялись сразу.
-- Всё ли в порядке с семантической вёрсткой в HTML исходного документа? Если нет -- поправьте, чтобы было, как нужно.
+P.S. Use event delegation.