ok

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md

@@ -1,6 +1,5 @@
 
-1. При клике -- заменяем `innerHTML` ячейки на `<textarea>` с размерами "под ячейку", без рамки.
-2. В `textarea.value` присваиваем содержимое ячейки.
-3. Фокусируем посетителя на ячейке вызовом `focus()`.
-4. Показываем кнопки OK/CANCEL под ячейкой.
-
+1. On click -- replace `innerHTML` of the cell by `<textarea>` with same sizes and no border. Can use Javascript or CSS to set the right size.
+2. Set `textarea.value` to `td.innerHTML`.
+3. Focus on the textarea.
+4. Show buttons OK/CANCEL under the cell, handle clicks on them.

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css

@@ -1,4 +1,4 @@
-/* общие стили для таблицы */
+/* common styles for the table, no need to modify these */
 
 th {
   text-align: center;
@@ -53,4 +53,4 @@ td {
 .se {
   background-color: #0c3;
   color: #fff;
-}
+}

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html

@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.</p>
+  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
 
   <table id="bagua-table">
     <tr>
@@ -75,4 +75,4 @@
 
 </body>
 
-</html>
+</html>

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js

@@ -1,32 +1,25 @@
-var table = document.getElementById('bagua-table');
+let table = document.getElementById('bagua-table');
 
-var editingTd;
+let editingTd;
 
 table.onclick = function(event) {
 
-  var target = event.target;
+  // 3 possible targets
+  let target = event.target.closest('.edit-cancel,.edit-ok,td');
 
-  while (target != table) {
-    if (target.className == 'edit-cancel') {
-      finishTdEdit(editingTd.elem, false);
-      return;
-    }
+  if (!table.contains(target)) return;
 
-    if (target.className == 'edit-ok') {
-      finishTdEdit(editingTd.elem, true);
-      return;
-    }
+  if (target.className == 'edit-cancel') {
+    finishTdEdit(editingTd.elem, false);
+  } else if (target.className == 'edit-ok') {
+    finishTdEdit(editingTd.elem, true);
+  } else if (target.nodeName == 'TD') {
+    if (editingTd) return; // already editing
 
-    if (target.nodeName == 'TD') {
-      if (editingTd) return; // already editing
-
-      makeTdEditable(target);
-      return;
-    }
-
-    target = target.parentNode;
+    makeTdEditable(target);
   }
-}
+
+};
 
 function makeTdEditable(td) {
   editingTd = {
@@ -34,9 +27,9 @@ function makeTdEditable(td) {
     data: td.innerHTML
   };
 
-  td.classList.add('edit-td'); // td, not textarea! the rest of rules will cascade
+  td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
 
-  var textArea = document.createElement('textarea');
+  let textArea = document.createElement('textarea');
   textArea.style.width = td.clientWidth + 'px';
   textArea.style.height = td.clientHeight + 'px';
   textArea.className = 'edit-area';
@@ -57,6 +50,6 @@ function finishTdEdit(td, isOk) {
   } else {
     td.innerHTML = editingTd.data;
   }
-  td.classList.remove('edit-td'); // remove edit class
+  td.classList.remove('edit-td'); 
   editingTd = null;
-}
+}

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css

@@ -1,4 +1,4 @@
-/* общие стили для таблицы */
+/* common styles for the table, no need to modify these */
 
 th {
   text-align: center;
@@ -53,4 +53,4 @@ td {
 .se {
   background-color: #0c3;
   color: #fff;
-}
+}

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html

@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.</p>
+  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
 
   <table id="bagua-table">
     <tr>
@@ -75,4 +75,4 @@
 
 </body>
 
-</html>
+</html>

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css

@@ -1 +1 @@
-/* ваши стили */
+/* your styles */

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js

@@ -1,3 +1,3 @@
-var table = document.getElementById('bagua-table');
+let table = document.getElementById('bagua-table');
 
-/* ваш код */
+/* your code */

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md

@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Редактирование TD по клику
+# Edit TD on click
 
-Сделать ячейки таблицы `td` редактируемыми по клику.
+Make table cells editable on click.
 
-- При клике -- ячейка `<td>` превращается в редактируемую, можно менять HTML. Размеры ячеек при этом не должны меняться.
-- В один момент может редактироваться одна ячейка.
-- При редактировании под ячейкой появляются кнопки для приема и отмена редактирования, только клик на них заканчивает редактирование.
+- On click -- the cell should became "editable" (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same.
+- Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
+- Only one cell may be editable at a moment. While a `<td>` is in "edit mode", clicks on other cells are ignored.
+- The table may have many cells. Use event delegation.
 
-Демо:
-
-[iframe src="solution"]
+The demo:
 
+[iframe src="solution" height=400]