Merge pull request #310 from xcurveballx/2-ui/1-document/11-coordinates

iliakan · web-flow · commit 8c360b4ba3e8 · 2019-07-20T14:15:52.000+03:00
2 ui/1 document/11 coordinates
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md
@@ -1,8 +1,8 @@
-# Outer corners
+# Внешние углы
 
-Outer corners are basically what we get from  [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
+Координаты внешних углов -- это как раз то, что возвращает функция [elem.getBoundingClientRect()](https://developer.mozilla.org/ru/docs/DOM/element.getBoundingClientRect).
 
-Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
+Координаты верхнего левого внешнего угла будут в переменной `answer1` и нижнего правого -- в `answer2`:
 
 ```js
 let coords = elem.getBoundingClientRect();
@@ -11,19 +11,19 @@ let answer1 = [coords.left, coords.top];
 let answer2 = [coords.right, coords.bottom];
 ```
 
-# Left-upper inner corner
+# Верхний левый внутренний угол
 
-That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
+Тут значения отличаются на ширину рамки. Надёжный способ получить интересующее значение -- это использовать `clientLeft/clientTop`:
 
 ```js
 let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
 ```
 
-# Right-bottom inner corner
+# Нижний правый внутренний угол
 
-In our case we need to substract the border size from the outer coordinates.
+В нашем случае нужно вычесть размеры рамки из внешних координат.
 
-We could use CSS way:
+Это может быть сделано с помощью CSS:
 
 ```js
 let answer4 = [
@@ -32,7 +32,7 @@ let answer4 = [
 ];
 ```
 
-An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
+Другим вариантом решения было бы добавление `clientWidth/clientHeight` к координатам верхнего левого угла. Так даже было бы лучше.
 
 ```js
 let answer4 = [
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html
@@ -5,18 +5,18 @@
   <meta charset="utf-8">
   <link rel="stylesheet" href="index.css">
   <script>
-    document.onclick = function(e) { // shows click coordinates
+    document.onclick = function(e) { // показывает координаты точки клика
       coords.innerHTML = e.clientX + ':' + e.clientY;
     };
   </script>
 </head>
 
 <body>
 
-  Click anywhere to get window coordinates.
-  <br> That's for testing, to check the result you get by JavaScript.
+  Кликните в любом месте для получения координат в контексте окна.
+  <br> Это для тестирования, чтобы проверить результат, который вы получили с помощью JavaScript.
   <br>
-  <div id="coords">(click coordinates show up here)</div>
+  <div id="coords">(координаты покажутся здесь)</div>
 
 
   <div id="field">
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html
@@ -5,18 +5,18 @@
   <meta charset="utf-8">
   <link rel="stylesheet" href="index.css">
   <script>
-    document.onclick = function(e) { // shows click coordinates
+    document.onclick = function(e) { // показывает координаты точки клика
       coords.innerHTML = e.clientX + ':' + e.clientY;
     };
   </script>
 </head>
 
 <body>
 
-  Click anywhere to get window coordinates.
-  <br> That's for testing, to check the result you get by JavaScript.
+  Кликните в любом месте для получения координат в контексте окна.
+  <br> Это для тестирования, чтобы проверить результат, который вы получили с помощью JavaScript.
   <br>
-  <div id="coords">(click coordinates show up here)</div>
+  <div id="coords">(координаты покажутся здесь)</div>
 
 
   <div id="field">
@@ -32,7 +32,7 @@
 
 
   <script>
-    // ...your code...
+    // ...ваш код...
   </script>
 
 </body>
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md
@@ -2,23 +2,23 @@ importance: 5
 
 ---
 
-# Find window coordinates of the field
+# Найдите координаты точек относительно окна браузера
 
-In the iframe below you can see a document with the green "field".
+В ифрейме ниже располагается документ с зелёным "полем".
 
-Use JavaScript to find window coordinates of corners pointed by with arrows.
+Используйте JavaScript, чтобы найти координаты углов, обозначенных стрелками.
 
-There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
+В документе уже реализован функционал, когда при клике на любом месте показываются соответствующие координаты.
 
 [iframe border=1 height=360 src="source" link edit]
 
-Your code should use DOM to get window coordinates of:
+Ваш код должен при помощи DOM получить четыре пары координат:
 
-1. Upper-left, outer corner (that's simple).
-2. Bottom-right, outer corner (simple too).
-3. Upper-left, inner corner (a bit harder).
-4. Bottom-right, inner corner (there are several ways, choose one).
+1. верхний левый, внешний угол (это просто).
+2. нижний правый, внешний угол (тоже просто).
+3. верхний левый, внутренний угол (чуть сложнее).
+4. нижний правый, внутренний угол (есть несколько способов, выберите один).
 
-The coordinates that you calculate should be the same as those returned by the mouse click.
+Координаты, вычисленные вами, должны совпадать с теми, которые возвращаются по клику мыши.
 
-P.S. The code should also work if the element has another size or border, not bound to any fixed values.
+P.S. Код должен работать, если у элемента другие размеры или есть рамка, без привязки к конкретным числам.
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.md b/2-ui/1-document/11-coordinates/2-position-at/solution.md
@@ -1,4 +1,4 @@
-In this task we only need to accurately calculate the coordinates. See the code for details.
+В этой задаче нам нужно только аккуратно вычислить координаты. Смотрите код для изучения деталей реализации.
 
-Please note: the elements must be in the document to read `offsetHeight` and other properties.
-A hidden (`display:none`) or out of the document element has no size.
+Обратите внимание, что элементы должны уже быть в документе перед чтением `offsetHeight` и других свойств.
+Спрятанный (`display:none`) элемент или элемент вне документа не имеют размеров.
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html
@@ -24,13 +24,13 @@
 
   <script>
     /**
-     * Positions elem relative to anchor as said in position.
+     * Позиционирует элемент elem относительно элемента anchor в соответствии со значением position.
      *
-     * @param {Node} anchor     Anchor element for positioning
-     * @param {string} position One of: top/right/bottom
-     * @param {Node} elem       Element to position
+     * @param {Node} anchor     элемент, около которого позиционируется другой элемент
+     * @param {string} position одно из: top/right/bottom
+     * @param {Node} elem       элемент, который позиционируется
      *
-     * Both elements: elem and anchor must be in the document
+     * Оба элемента elem и anchor должны присутствовать в документе
      */
     function positionAt(anchor, position, elem) {
 
@@ -56,8 +56,8 @@
     }
 
     /**
-     * Shows a note with the given html at the given position
-     * relative to the anchor element.
+     * Показывает заметку с заданным содержимым на заданной позиции
+     * относительно элемента anchor.
      */
     function showNote(anchor, position, html) {
 
@@ -69,7 +69,7 @@
       positionAt(anchor, position, note);
     }
 
-    // test it
+    // проверка
     let blockquote = document.querySelector('blockquote');
 
     showNote(blockquote, "top", "note above");
diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html
@@ -24,24 +24,23 @@
 
   <script>
     /**
-     * Positions elem relative to anchor as said in position.
+     * Позиционирует элемент elem относительно элемента anchor в соответствии со значением position.
      *
-     * @param {Node} anchor     Anchor element for positioning
-     * @param {string} position One of: top/right/bottom
-     * @param {Node} elem       Element to position
+     * @param {Node} anchor     элемент, около которого позиционируется другой элемент
+     * @param {string} position одно из: top/right/bottom
+     * @param {Node} elem       элемент, который позиционируется
      *
-     * Both elements: elem and anchor must be in the document
+     * Оба элемента elem и anchor должны присутствовать в документе
      */
     function positionAt(anchor, position, elem) {
-      // ... your code ...
+      // ... ваш код ...
     }
 
     /**
-     * Shows a note with the given html at the given position
-     * relative to the anchor element.
+     * Показывает заметку с заданным содержимым на заданной позиции
+     * относительно элемента anchor.
      */
     function showNote(anchor, position, html) {
-
       let note = document.createElement('div');
       note.className = "note";
       note.innerHTML = html;
diff --git a/2-ui/1-document/11-coordinates/2-position-at/task.md b/2-ui/1-document/11-coordinates/2-position-at/task.md
@@ -2,17 +2,18 @@ importance: 5
 
 ---
 
-# Show a note near the element
+# Покажите заметку рядом с элементом
 
-Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element.
+Создайте функцию `positionAt(anchor, position, elem)`, которая позиционирует элемент `elem` в зависимости от значения свойства `position` рядом с элементом `anchor`.
 
-The `position` must be a string with any one of 3 values:
-- `"top"` - position `elem` right above `anchor`
-- `"right"` - position `elem` immediately at the right of `anchor`
-- `"bottom"` - position `elem` right below `anchor`
+Аргумент `position` - строка с одним из 3 значений:
+- `"top"` - расположить `elem` прямо над `anchor`
+- `"right"` - расположить `elem` непосредственно справа от `anchor`
+- `"bottom"` - расположить `elem` прямо под `anchor`
 
-It's used inside function `showNote(anchor, position, html)`, provided in the task source code, that creates a "note" element with given `html` and shows it at the given `position` near the `anchor`.
+Она используется внутри функции `showNote(anchor, position, html)`, которая уже есть в исходном коде задачи. Она создаёт и показывает элемент-"заметку" с текстом `html` на заданной позиции `position` рядом с элементом `anchor`.
+
+Демо заметки:
 
-Here's the demo of notes:
 
 [iframe src="solution" height="350" border="1" link]
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md
@@ -1,4 +1,4 @@
-The solution is actually pretty simple:
+Решение достаточно простое:
 
-- Use `position:absolute` in CSS instead of `position:fixed` for `.note`.
-- Use the function [getCoords()](info:coordinates#getCoords) from the chapter <info:coordinates> to get document-relative coordinates.
+- Используйте `position:absolute` в CSS вместо `position:fixed` для элемента с классом `.note`.
+- Используйте функцию [getCoords()](info:coordinates#getCoords) из главы <info:coordinates>, чтобы получить координаты относительно документа.
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html
@@ -66,7 +66,7 @@
       positionAt(anchor, position, note);
     }
 
-    // test it
+    // проверка
     let blockquote = document.querySelector('blockquote');
 
     showNote(blockquote, "top", "note above");
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md
@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Show a note near the element (absolute)
+# Покажите заметку около элемента (абсолютное позиционирование)
 
-Modify the solution of the [previous task](info:task/position-at) so that the note uses `position:absolute` instead of `position:fixed`.
+Измените код решения [предыдущего задания](info:task/position-at) так, чтобы элемент заметки использовал свойство `position:absolute` вместо `position:fixed`.
 
-That will prevent its "runaway" from the element when the page scrolls.
+Это предотвратит расхождение элементов при прокрутке страницы.
 
-Take the solution of that task as a starting point. To test the scroll, add the style `<body style="height: 2000px">`.
+Используйте решение предыдущего задания для начала. Чтобы проверить решение в условиях с прокруткой, добавьте стиль элементу `<body style="height: 2000px">`.
diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md b/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md
@@ -2,27 +2,27 @@ importance: 5
 
 ---
 
-# Position the note inside (absolute)
+# Расположите заметку внутри элемента (абсолютное позиционирование)
 
-Extend the previous task <info:task/position-at-absolute>: teach the function  `positionAt(anchor, position, elem)` to insert `elem` inside the `anchor`.
+Усовершенствуйте решение предыдущего задания <info:task/position-at-absolute>: научите функцию `positionAt(anchor, position, elem)` вставлять `elem` внутрь `anchor`.
 
-New values for `position`:
+Новые значения для аргумента `position`:
 
-- `top-out`, `right-out`, `bottom-out` -- work the same as before, they insert the `elem` over/right/under `anchor`.
-- `top-in`, `right-in`, `bottom-in` -- insert `elem` inside the `anchor`: stick it to the upper/right/bottom edge.
+- `top-out`, `right-out`, `bottom-out` -- работают так же, как раньше, они вставляют `elem` сверху/справа/снизу `anchor`.
+- `top-in`, `right-in`, `bottom-in` -- вставляют `elem` внутрь `anchor`: приклеивают его к верхнему/правому/нижнему краю.
 
-For instance:
+Например:
 
 ```js
-// shows the note above blockquote
+// показывает заметку поверх цитаты
 positionAt(blockquote, "top-out", note);
 
-// shows the note inside blockquote, at the top
+// показывает заметку внутри цитаты вблизи верхнего края элемента
 positionAt(blockquote, "top-in", note);
 ```
 
-The result:
+Результат:
 
 [iframe src="solution" height="310" border="1" link]
 
-As the source code, take the solution of the task <info:task/position-at-absolute>.
+Для начала возьмите решение задания <info:task/position-at-absolute>.
diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md
diff --git a/2-ui/1-document/11-coordinates/head.html b/2-ui/1-document/11-coordinates/head.html

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`positionAt(anchor, position, note);`
`67`	`67`	`}`
`68`	`68`
`69`		`- // test it`
	`69`	`+ // проверка`
`70`	`70`	`let blockquote = document.querySelector('blockquote');`
`71`	`71`
`72`	`72`	`showNote(blockquote, "top", "note above");`