Focusing: focus/blur

2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Editable div
+# div قابل ویرایش
 
-Create a `<div>` that turns into `<textarea>` when clicked.
+یک `<div>` ایجاد کنید که وقتی روی آن کلیک می‌شود به `<textarea>` تبدیل شود.
 
-The textarea allows to edit the HTML in the `<div>`.
+با کمک textarea می‌توانید HTML را در `<div>` ویرایش کنید.
 
-When the user presses `key:Enter` or it loses focus, the `<textarea>` turns back into `<div>`, and its content becomes HTML in `<div>`.
+وقتی که کاربر `key:Enter` را فشار دهد یا آن focus را از دست بدهد، `<textarea>` دوباره به `<div>` تبدیل می‌شود و محتوای آن در `<div>` به HTML تبدیل می‌شود.
 
 [demo src="solution"]

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

@@ -1,5 +1,5 @@
 
-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.
+1. با کلیک -- `innerHTML` سلول `<textarea>` را با چیزی با همان سایز اما بدون border جایگزین کنید. می‌توانید از JavaScript یا CSS استفاده کنید تا سایز درست را تنظیم کنید.
+2.مقدار `textarea.value` را برابر `td.innerHTML` قرار دهید. 
+3. روی textarea فوکوس کنید.
+4. کلیدهای OK/CANCEL را زیر سلول نشان دهید و به کلیک‌های روی آن‌ها رسیدگی کنید.

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

@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Edit TD on click
+# ویرایش TD با click
 
-Make table cells editable on click.
+سلول‌های جدول را با کلیک قابل ویرایش کنید.
 
-- On click -- the cell should become "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.
+- با کلیک -- سلول باید "قابل ویرایش" باشد. (textarea داخل آن نمایش داده شود)،‌ ما می‌توانیم HTML را تغییر دهیم. هیچ تفییر سایزی نباید وجود داشته باشد،‌تمام اندازه‌های هندسی باید یکسان بمانند.
+- دکمه‌های OK و CANCEL زیر سلول ظاهر می‌شوند تا ویرایش کردن را تمام/کنسل کنند.
+- دذ لحظه تنها یک سلول می‌تواند قابلیت ویرایش داشته باشد. زمانی که یک `<td>` در "حالت ویرایش" است، کلیک‌های روی بقیه سلول‌ها نادیده گرفته می‌شوند.
+- جدول ممکن است سلول‌های زیادی داشته باشد. از event delegation استفاده کنید.
 
-The demo:
+نسخه‌ی نمایشی:
 
 [iframe src="solution" height=400]

2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md

@@ -1,6 +1,6 @@
 
-We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then `mouse.onkeydown` to handle arrow keys.
+ما می‌توانیم برای هندل کردن click از `mouse.onclick`، برای قابل حرکت دادن mouse از `position:fixed` و سپس از `mouse.onkeydown` برای هندل کردن کلید‌های جهت‌دار استفاده کنیم.
 
-The only pitfall is that `keydown` only triggers on elements with focus. So we need to add `tabindex` to the element.  As we're forbidden to change HTML, we can use `mouse.tabIndex` property for that.
+تنها مشکل این است که `keydown` فقط روی elementهایی که focus دارند فعال می‌شود. پس باید `tabindex` را به element اضافه کنیم. چون اجازه نداریم که HTML را تغییر دهیم، می‌توانیم برای آن از `mouse.tabIndex` استفاده کنیم.
 
-P.S. We also can replace `mouse.onclick` with `mouse.onfocus`.
+پی‌نوشت: همچنین می‌توانیم `mouse.onclick` را با `mouse.onfocus` جایگزین کنیم.

2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md

@@ -2,12 +2,12 @@ importance: 4
 
 ---
 
-# Keyboard-driven mouse
+# ماوس همراه با کیبورد
 
-Focus on the mouse. Then use arrow keys to move it:
+روی موش focus کنید. سپس از کلیدهای جهت‌دار خود استفاده کنید تا آن را حرکت دهید. 
 
 [demo src="solution"]
 
-P.S. Don't put event handlers anywhere except the `#mouse` element.
+پی‌نوشت: از event handlerها جایی به جز element با آیدی `mouse#` استفاده نکنید.
 
-P.P.S. Don't modify HTML/CSS, the approach should be generic and work with any element.
+پی‌نوشت۲: فایل HTML/CSS را تغییر ندهید. رویکرد شما باید کلی باشد و با هر elementای کار کند.