Merge pull request #281 from afilahkle/master

Event delegation

Author: afilahkle

2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Hide messages with delegation
+# إخفاء الرسائل باستخدام التفويض
 
-There's a list of messages with removal buttons `[x]`. Make the buttons work.
+هناك قائمة بالرسائل مع أزرار إزالة `[x]`. اجعل الأزرار تعمل.
 
-Like this:
+مثل هذا:
 
 [iframe src="solution" height=420]
 
-P.S. Should be only one event listener on the container, use event delegation.
+ملاحظة: يجب أن يكون هناك مستمع واحد فقط للحدث على الحاوية ، استخدم تفويض الحدث.

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md

@@ -1,4 +1,4 @@
-The solution has two parts.
+الحل له جزأين.
 
-1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
-2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
+1. قم بلف كل عنوان عقدة شجرة في `<span>`. ثم يمكننا تصميم CSS عليها على `:hover` والتعامل مع النقرات بالضبط على النص ، لأن عرض `<span>` هو بالضبط عرض النص (على عكس بدونه).
+2. قم بتعيين معالج لعقدة الجذر `tree` وتعامل مع النقرات على تلك العناوين `<span>`.

2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Tree menu
+# قائمة الشجرة
 
-Create a tree that shows/hides node children on click:
+قم بإنشاء شجرة تعرض / تخفي عقد الأطفال عند النقر:
 
 [iframe border=1 src="solution"]
 
-Requirements:
+المتطلبات:
 
-- Only one event handler (use delegation)
-- A click outside the node title (on an empty space) should not do anything.
+- معالج واحد فقط للحدث (استخدم التفويض)
+- يجب ألا يؤدي النقر خارج عنوان العقدة (على مساحة فارغة) إلى أي شيء.

2-ui/2-events/03-event-delegation/3-sortable-table/task.md

@@ -2,42 +2,42 @@ importance: 4
 
 ---
 
-# Sortable table
+# جدول قابل للفرز
 
-Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
+اجعل الجدول قابلًا للفرز: يجب أن تقوم النقرات على عناصر `<th>` بفرزه حسب العمود المقابل.
 
-Each `<th>` has the type in the attribute, like this:
+كل `<th>` لديه النوع في السمة ، مثل هذا:
 
 ```html
 <table id="grid">
   <thead>
     <tr>
 *!*
-      <th data-type="number">Age</th>
-      <th data-type="string">Name</th>
+      <th data-type="number">العمر</th>
+      <th data-type="string">الاسم</th>
 */!*
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>5</td>
-      <td>John</td>
+      <td>جون</td>
     </tr>
     <tr>
       <td>10</td>
-      <td>Ann</td>
+      <td>آن</td>
     </tr>
     ...
   </tbody>
 </table>
 ```
 
-In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
+في المثال أعلاه ، يحتوي العمود الأول على أرقام ، والثاني - على سلاسل. يجب أن تتعامل وظيفة الفرز مع الترتيب وفقًا للنوع.
 
-Only `"string"` and `"number"` types should be supported.
+يجب دعم أنواع `"string"` و `"number"` فقط.
 
-The working example:
+المثال العامل:
 
 [iframe border=1 src="solution" height=190]
 
-P.S. The table can be big, with any number of rows and columns.
+ملاحظة: يمكن أن يكون الجدول كبيرًا ، بأي عدد من الصفوف والأعمدة.

2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

@@ -2,37 +2,37 @@ importance: 5
 
 ---
 
-# Tooltip behavior
+# سلوك التلميح
 
-Create JS-code for the tooltip behavior.
+قم بإنشاء كود JS لسلوك التلميح.
 
-When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
+عندما يأتي الماوس فوق عنصر مع `data-tooltip` ، يجب أن يظهر التلميح فوقه ، وعندما يذهب يختفي.
 
-An example of annotated HTML:
+مثال على HTML المشروح:
 ```html
-<button data-tooltip="the tooltip is longer than the element">Short button</button>
-<button data-tooltip="HTML<br>tooltip">One more button</button>
+<button data-tooltip="التلميح أطول من العنصر">زر قصير</button>
+<button data-tooltip="تلميح HTML<br>">زر آخر</button>
 ```
 
-Should work like this:
+يجب أن يعمل هكذا:
 
 [iframe src="solution" height=200 border=1]
 
-In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags (yet).
+في هذه المهمة نفترض أن جميع العناصر مع `data-tooltip` لديها نص فقط بداخلها. لا توجد علامات متداخلة (بعد).
 
-Details:
+التفاصيل:
 
-- The distance between the element and the tooltip should be `5px`.
-- The tooltip should be centered relative to the element, if possible.
-- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
-- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML.
+- يجب أن يكون المسافة بين العنصر والتلميح `5px`.
+- يجب أن يكون التلميح مركزًا بالنسبة للعنصر ، إذا كان ذلك ممكنًا.
+- يجب ألا يتجاوز التلميح حواف النافذة. عادةً ما يكون فوق العنصر ، ولكن إذا كان العنصر في أعلى الصفحة ولا يوجد مساحة للتلميح ، فأدناه.
+- يتم إعطاء محتوى التلميح في سمة `data-tooltip`. يمكن أن يكون HTML تعسفيًا.
 
-You'll need two events here:
-- `mouseover` triggers when a pointer comes over an element.
-- `mouseout` triggers when a pointer leaves an element.
+ستحتاج إلى حدثين هنا:
+- يُطلق الحدث `mouseover` عندما يأتي مؤشر فوق عنصر.
+- يُطلق الحدث `mouseout` عندما يغادر المؤشر عنصرًا.
 
-Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
+يرجى استخدام تفويض الحدث: قم بإعداد معالجين على `document` لتتبع جميع "overs" و "outs" من العناصر مع `data-tooltip` وإدارة التلميحات من هناك.
 
-After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
+بعد تنفيذ السلوك ، يمكن حتى للأشخاص غير الملمين بـ JavaScript إضافة عناصر مُلحقة.
 
-P.S. Only one tooltip may show up at a time.
+ملاحظة: قد يظهر تلميح واحد فقط في وقت واحد.