mouse-event-basics

javascript-tutorial · Sep 10, 2021 · 255c30a · 255c30a
1 parent df0a6f2
commit 255c30a
Show file tree

Hide file tree

Showing 5 changed files with 221 additions and 226 deletions.
diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html
@@ -1,62 +1,58 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    .selected {
-      background: #0f0;
-    }
-
-    li {
-      cursor: pointer;
-    }
-  </style>
-</head>
-
-<body>
-
-  Click on a list item to select it.
-  <br>
-
-  <ul id="ul">
-    <li>Christopher Robin</li>
-    <li>Winnie-the-Pooh</li>
-    <li>Tigger</li>
-    <li>Kanga</li>
-    <li>Rabbit. Just rabbit.</li>
-  </ul>
-
-  <script>
-    ul.onclick = function(event) {
-      if (event.target.tagName != "LI") return;
-
-      if (event.ctrlKey || event.metaKey) {
-        toggleSelect(event.target);
-      } else {
-        singleSelect(event.target);
-      }
-
-    }
-
-    // prevent unneeded selection of list elements on clicks
-    ul.onmousedown = function() {
-      return false;
-    };
-
-    function toggleSelect(li) {
-      li.classList.toggle('selected');
-    }
-
-    function singleSelect(li) {
-      let selected = ul.querySelectorAll('.selected');
-      for(let elem of selected) {
-        elem.classList.remove('selected');
-      }
-      li.classList.add('selected');
-    }
-
-  </script>
-
-</body>
+	<head>
+		<meta charset="utf-8" />
+		<style>
+			.selected {
+				background: #0f0;
+			}
+
+			li {
+				cursor: pointer;
+			}
+		</style>
+	</head>
+
+	<body>
+
+		روی یک آیتم کلیک کنید تا انتخاب شود.
+		<br />
+
+		<ul id="ul">
+			<li>کریستوفر رابین</li>
+			<li>وینی د پو</li>
+			<li>ببری</li>
+			<li>کانگا</li>
+			<li>خرگوش. فقط، خرگوش</li>
+		</ul>
+
+		<script>
+			ul.onclick = function (event) {
+				if (event.target.tagName != 'LI') return
+
+				if (event.ctrlKey || event.metaKey) {
+					toggleSelect(event.target)
+				} else {
+					singleSelect(event.target)
+				}
+			}
+
+			// جلوگیری از انتخاب غیرضروری آیتم‌ها هنگام کلیک
+			ul.onmousedown = function () {
+				return false
+			}
+
+			function toggleSelect(li) {
+				li.classList.toggle('selected')
+			}
+
+			function singleSelect(li) {
+				let selected = ul.querySelectorAll('.selected')
+				for (let elem of selected) {
+					elem.classList.remove('selected')
+				}
+				li.classList.add('selected')
+			}
+		</script>
+	</body>
 </html>
diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html
@@ -16,19 +16,19 @@
 
 <body>
 
-  Click on a list item to select it.
+  روی یک آیتم کلیک کنید تا انتخاب شود.
   <br>
 
   <ul id="ul">
-    <li>Christopher Robin</li>
-    <li>Winnie-the-Pooh</li>
-    <li>Tigger</li>
-    <li>Kanga</li>
-    <li>Rabbit. Just rabbit.</li>
+    <li>کریستوفر رابین</li>
+    <li>وینی د پو</li>
+    <li>ببری</li>
+    <li>کانگا</li>
+    <li>خرگوش. فقط، خرگوش</li>
   </ul>
 
   <script>
-    // ...your code...
+    // ...کد شما...
   </script>
 
 </body>

diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md
@@ -2,17 +2,17 @@ importance: 5
 
 ---
 
-# Selectable list
+# لیست انتخاب‌شونده
 
-Create a list where elements are selectable, like in file-managers.
+یک لیست بسازید که عناصر آن قابل انتخاب باشند، مانند اپلیکیشن‌های مدیریت فایل.
 
-- A click on a list element selects only that element (adds the class `.selected`), deselects all others.
-- If a click is made with `key:Ctrl` (`key:Cmd` for Mac), then the selection is toggled on the element, but other elements are not modified.
+- کلیک روی عنصر لیست فقط آن عنصر را انتخاب می‌کند. (کلاس `.selected` را اضافه کند)، بقیه عناصر باید لغو انتخاب شوند.
+- اگر که کلیک همراه با `key:Ctrl` (`key:Cmd` برای مک) باشد، پس عمل انتخاب یا لغو انتخاب فقط برای آن عنصر عمل کند، درحالی که بقیه عنصرها تغییری نکنند.
 
-The demo:
+دمو:
 
 [iframe border="1" src="solution" height=180]
 
-P.S. For this task we can assume that list items are text-only. No nested tags.
+پی‌نوشت: برای این تکلیف می‌توانیم در نظر بگیریم که آیتم‌های داخل لیست فقط متن هستند، و نه تگ‌های تو در تو.
 
-P.P.S. Prevent the native browser selection of the text on clicks.
+پی‌پی‌نوشت: از رفتار پیش‌فرض مرورگر که باعث انتخاب متن هنگام کلیک کردن می‌شود جلوگیری کنید.