Skip to content

Commit 76e0de7

Browse files
mahdyarmahdyar
authored
Merge pull request #154 from erfanyeganegi/browser-events
Introduction to browser events
2 parents ff4d856 + b26e551 commit 76e0de7

File tree

26 files changed

+291
-291
lines changed

26 files changed

+291
-291
lines changed

‎2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77

88
<body>
99

10-
<input type="button" id="hider" value="Click to hide the text" />
10+
<input type="button" id="hider" value="کلیک کنید تا متن مخفی شود" />
1111

12-
<div id="text">Text</div>
12+
<div id="text">متن</div>
1313

1414
<script>
15-
// Here it doesn't matter how we hide the text,
16-
// could also use style.display:
15+
// در اینجا چگونگی مخفی کردن متن اهمیت ندارد،
16+
// همچنین می‌توانید از style.display استفاده کنید:
1717
document.getElementById('hider').onclick = function() {
1818
document.getElementById('text').hidden = true;
1919
}

‎2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77

88
<body>
99

10-
<input type="button" id="hider" value="Click to hide the text" />
10+
<input type="button" id="hider" value="کلیک کنید تا متن مخفی شود" />
1111

12-
<div id="text">Text</div>
12+
<div id="text">متن</div>
1313

1414
<script>
15-
/* your code */
15+
/* کد شما */
1616
</script>
1717

1818
</body>

‎2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ importance: 5
22

33
---
44

5-
# Hide on click
5+
# مخفی کردن در صورت کلیک
66

7-
Add JavaScript to the `button` to make `<div id="text">` disappear when we click it.
7+
یک کد جاوا‌اسکریپتی به `button` اضافه کنید تا `<div id="text">` در زمان کلیک شدن مخفی شود.
88

9-
The demo:
9+
دمو:
1010

1111
[iframe border=1 src="solution" height=80]

‎2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
Can use `this` in the handler to reference "the element itself" here:
1+
برای دسترسی به "خود عنصر" می‌توانیم درون کنترل‌کننده از `this` استفاده کنیم:
22

33
```html run height=50
4-
<input type="button" onclick="this.hidden=true" value="Click to hide">
4+
<input type="button" onclick="this.hidden=true" value="کلیک کنید تا مخفی شود">
55
```

‎2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ importance: 5
22

33
---
44

5-
# Hide self
5+
# مخفی کردن خود عنصر
66

7-
Create a button that hides itself on click.
7+
یک button بسازید که وقتی کلیک می‌شود خودش را مخفی کند.
88

99
```online
10-
Like this:
11-
<input type="button" onclick="this.hidden=true" value="Click to hide">
10+
مثل این:
11+
<input type="button" onclick="this.hidden=true" value="کلیک کنید تا مخفی شود">
1212
```

‎2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
The answer: `1` and `2`.
1+
جواب: `1` و `2`.
22

3-
The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function.
3+
کنترل‌کننده اول اجرا می‌شود زیرا توسط `removeEventListener` حذف نمی‌شود. برای حذف کنترل‌کننده باید دقیقا خود تابعی که استفاده کردیم را به ورودی بدهیم. و در این کد یک تابع جدید به عنوان ورودی استفاده شده که فقط شبیه هستند، اما یک تابع نیستند.
44

5-
To remove a function object, we need to store a reference to it, like this:
5+
برای حذف یک شئ تابع باید آنرا در یک متغیر به عنوان مرجع ذخیره کنیم. مانند:
66

77
```js
88
function handler() {
@@ -13,4 +13,4 @@ button.addEventListener("click", handler);
1313
button.removeEventListener("click", handler);
1414
```
1515

16-
The handler `button.onclick` works independently and in addition to `addEventListener`.
16+
کنترل‌کننده `button.onclick` جدا و علاوه بر `addEventListener` کار می‌کند.

‎2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ importance: 5
22

33
---
44

5-
# Which handlers run?
5+
# کدام کنترل‌کننده اجرا شود؟
66

7-
There's a button in the variable. There are no handlers on it.
7+
یک دکمه درون متغیر ذخیره شده. ولی هیچ کنترل‌کننده به آن اختصاص نیافته.
88

9-
Which handlers run on click after the following code? Which alerts show up?
9+
با توجه به کد زیر، کدام کنترل‌کننده بعد از کلیک اجرا می‌شود؟ کدوم پیغام نمایش داده می‌شود؟
1010

1111
```js no-beautify
1212
button.addEventListener("click", () => alert("1"));

‎2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11

2-
First we need to choose a method of positioning the ball.
2+
اول نیاز داریم که روش قرارگیری توپ را انتخاب کنیم.
33

4-
We can't use `position:fixed` for it, because scrolling the page would move the ball from the field.
4+
نمی‌توانیم از `position:fixed` به این منظور استفاده کنیم. چون اسکرول کردن صفحه باید توپ را در زمین جابجا کند.
55

6-
So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned.
6+
پس باید از `position:absolute` استفاده کنیم و برای اینکه از موقعیت توپ مطمئن شویم، روش قرارگیری `field` را نیز تنظیم می‌کنیم.
77

8-
Then the ball will be positioned relatively to the field:
8+
در این صورت، توپ نسبت به زمین قرار گرفته می‌شود:
99

1010
```css
1111
#field {
@@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field:
1616

1717
#ball {
1818
position: absolute;
19-
left: 0; /* relative to the closest positioned ancestor (field) */
19+
left: 0; /* نسبت به نزدیکترین والدی که موقعیت آن تنظیم شده (field) */
2020
top: 0;
21-
transition: 1s all; /* CSS animation for left/top makes the ball fly */
21+
transition: 1s all; /* انیمیشن‌های CSS برای چپ/بالا، انگار توپ پرتاب شده */
2222
}
2323
```
2424

25-
Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now.
25+
حال باید مقدارهای درستی به `ball.style.left/top` بدهیم. این مقدار نسبت به زمین خواهد بود.
2626

27-
Here's the picture:
27+
مانند این تصویر:
2828

2929
![](move-ball-coords.svg)
3030

31-
We have `event.clientX/clientY` -- window-relative coordinates of the click.
31+
ما `event.clientX/clientY` را داریم، مختصات اشاره‌گر موس نسبت به پنجره.
3232

33-
To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width:
33+
برای اینکه مقدار `left` مختصات اشاره‌گر موس در زمان کلیک را نسبت به زمین بگیریم، باید چپ زمین و عرض حاشیه را از هم کم کنیم.
3434

3535
```js
3636
let left = event.clientX - fieldCoords.left - field.clientLeft;
3737
```
3838

39-
Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor.
39+
معمولا، `ball.style.left` به معنی "حاشیه چپ عنصر" (توپ) است. پس اگر که به `left` مقدار دهیم، پس گوشیه توپ، و نه وسط آن زیر موس قرار می‌گیرد.
4040

41-
We need to move the ball half-width left and half-height up to make it center.
41+
باید که توپ را به اندازه نصف طولش به چپ، و به اندازه نصف ارتفاع آن به بالا ببریم تا وسط قرار گیرد.
4242

43-
So the final `left` would be:
43+
پس مقدار نهایی `left` به صورت زیر است:
4444

4545
```js
4646
let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
4747
```
4848

49-
The vertical coordinate is calculated using the same logic.
49+
مختصات عمودی نیز با همین منطق محاسبه می‌شود.
5050

51-
Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS.
51+
لطفا توجه کنید که طول/ارتفاع توب باید در زمانی که به `ball.offsetWidth` معلوم باشد. پس باید در HTML یا CSS آنها را مقدار دهی کنیم.

‎2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
<body style="height:2000px">
2929

30-
Click on a field to move the ball there.
30+
روی زمین کلیک کنید تا توپ حرکت کند.
3131
<br>
3232

3333

@@ -39,29 +39,29 @@
3939
<script>
4040
field.onclick = function(event) {
4141

42-
// window-relative field coordinates
42+
// مختصات زمین نسبت به پنجره
4343
let fieldCoords = this.getBoundingClientRect();
4444

45-
// the ball has position:absolute, the field: position:relative
46-
// so ball coordinates are relative to the field inner left-upper corner
45+
// توپ موقعیت position:absolute و زمین موقعیت position:relative دارد
46+
// پس مختصات توپ نسبت به گوشه بالا چپ درون زمین است
4747
let ballCoords = {
4848
top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight / 2,
4949
left: event.clientX - fieldCoords.left - field.clientLeft - ball.clientWidth / 2
5050
};
5151

52-
// prevent crossing the top field boundary
52+
// جلوگیری از عبور از مرز بالای زمین
5353
if (ballCoords.top < 0) ballCoords.top = 0;
5454

55-
// prevent crossing the left field boundary
55+
// جلوگیری از عبور از مرز چپ زمین
5656
if (ballCoords.left < 0) ballCoords.left = 0;
5757

5858

59-
// // prevent crossing the right field boundary
59+
// جلوگیری از عبور از مرز راست زمین
6060
if (ballCoords.left + ball.clientWidth > field.clientWidth) {
6161
ballCoords.left = field.clientWidth - ball.clientWidth;
6262
}
6363

64-
// prevent crossing the bottom field boundary
64+
// جلوگیری از عبور از مرز پایین زمین
6565
if (ballCoords.top + ball.clientHeight > field.clientHeight) {
6666
ballCoords.top = field.clientHeight - ball.clientHeight;
6767
}

‎2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616

1717
<body style="height:2000px">
1818

19-
Click on a field to move the ball there.
20-
<br> The ball should never leave the field.
19+
روی زمین کلیک کنید تا توپ حرکت کند.
20+
<br> توپ نباید هیچ‌وقت زمین را ترک کند.
2121

2222

2323
<div id="field">

‎2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@ importance: 5
22

33
---
44

5-
# Move the ball across the field
5+
# توپ را طول زمین حرکت دهید
66

7-
Move the ball across the field to a click. Like this:
7+
باید یک کلیک توپ را در طول زمین حرکت کنید. مانند:
88

99
[iframe src="solution" height="260" link]
1010

11-
Requirements:
11+
نیازها:
1212

13-
- The ball center should come exactly under the pointer on click (if possible without crossing the field edge).
14-
- CSS-animation is welcome.
15-
- The ball must not cross field boundaries.
16-
- When the page is scrolled, nothing should break.
13+
- در زمان کلیک، وسط توپ باید دقیقا زیر وس قرار بگیرید (در صورت امکان بدون خروج از حاشیه‌های زمین).
14+
- استفاده از انیمیشن‌های CSS توصیه می‌شود.
15+
- توپ نباید از حدود زمین عبور کند.
16+
- در صورت پیمایش صفحه، نباید چیزی خراب شود.
1717

18-
Notes:
18+
نکات:
1919

20-
- The code should also work with different ball and field sizes, not be bound to any fixed values.
21-
- Use properties `event.clientX/event.clientY` for click coordinates.
20+
- کد شما باید با توپ‌ها و اندازه‌های مختلف زمین کارکند، و مقید به مقادیر ثابتی نباشد.
21+
- از خصوصیات `event.clientX/event.clientY` برای گرفتن مختصات اشاره‌گر موس استفاده کنید.

‎2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,47 @@
11

22
# HTML/CSS
3-
First let's create HTML/CSS.
3+
اول باید که HTML/CSS را بسازیم.
44

5-
A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element.
5+
منو یک جزء گرافیکی مستقل روی صفحه است. پس بهتر است که همه آنرا را درون یک عنصر DOM قرار دهیم.
66

7-
A list of menu items can be laid out as a list `ul/li`.
7+
یک لیست از آیتم‌های منو می‌تواند مانند لیستی از `ul/li` باشد.
88

9-
Here's the example structure:
9+
در اینجا یک ساختار نمونه آمده:
1010

1111
```html
1212
<div class="menu">
13-
<span class="title">Sweeties (click me)!</span>
13+
<span class="title">شیرینی‌ها (کلیک کنید)!</span>
1414
<ul>
15-
<li>Cake</li>
16-
<li>Donut</li>
17-
<li>Honey</li>
15+
<li>کیک</li>
16+
<li>دونات</li>
17+
<li>عسل</li>
1818
</ul>
1919
</div>
2020
```
2121

22-
We use `<span>` for the title, because `<div>` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width.
22+
برای عنوان از `<spcan>` استفاده می‌کنیم، زیرا `<div>` از قبل یک ویژگی خاص `display: block` دارد و 100% عرض افقی را پر می‌کند.
2323

24-
Like this:
24+
مانند این:
2525

2626
```html autorun height=50
27-
<div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
27+
<div style="border: solid red 1px" onclick="alert(1)">شیرینی‌ها (کلیک کنید)!</div>
2828
```
2929

30-
So if we set `onclick` on it, then it will catch clicks to the right of the text.
30+
پس اگر `onclick` را روی آن تعریف کنیم، کلیک‌ها را در سمت راست متن نیز دریافت می‌کند.
3131

32-
As `<span>` has an implicit `display: inline`, it occupies exactly enough place to fit all the text:
32+
در صورتی که `<span>` از قبل یک ویژگی خاص `display: inline‍` دارد، تنها فضای مورد نیاز متن را اشغال می‌کند:
3333

3434
```html autorun height=50
35-
<span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
35+
<span style="border: solid red 1px" onclick="alert(1)">شیرینی‌ها (کلیک کنید)!</span>
3636
```
3737

38-
# Toggling the menu
38+
# باز و بسته کردن منو
3939

40-
Toggling the menu should change the arrow and show/hide the menu list.
40+
باز و بسته کردن منو باید کمان‌ها را تغییر دهد و آیتم‌های درون لیست منو را نشان دهد یا مخفی کند.
4141

42-
All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`.
42+
همه‌ی این تغییرات کاملا توسط CSS کنترل می‌شود. در جاوااسکریپت باید وضعیت باز و بسته رودن را با اضافه کردن یا حذف کردن کلاس `.open` مشخص کنیم.
4343

44-
Without it, the menu will be closed:
44+
بدون این کلاس، منو بسته است:
4545

4646
```css
4747
.menu ul {
@@ -58,7 +58,7 @@ Without it, the menu will be closed:
5858
}
5959
```
6060

61-
...And with `.open` the arrow changes and the list shows up:
61+
... و با `.open` کمان‌ها تغییر می‌کنند و لیست نمایش داده می‌شود:
6262

6363
```css
6464
.menu.open .title::before {

‎2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@
3535
<body>
3636

3737
<div id="sweeties" class="menu">
38-
<span class="title">Sweeties (click me)!</span>
38+
<span class="title">شیرینی‌ها (کلیک کنید)!</span>
3939
<ul>
40-
<li>Cake</li>
41-
<li>Donut</li>
42-
<li>Honey</li>
40+
<li>کیک</li>
41+
<li>دونات</li>
42+
<li>عسل</li>
4343
</ul>
4444

4545
</div>

‎2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
</head>
66
<body>
77

8-
▶ ▼ Sweeties (click me)!
8+
▶ ▼ شیرینی‌ها (کلیک کنید)!
99
<ul>
10-
<li>Cake</li>
11-
<li>Donut</li>
12-
<li>Honey</li>
10+
<li>کلیک</li>
11+
<li>دونات</li>
12+
<li>عسل</li>
1313
</ul>
1414

1515
</body>

‎2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ importance: 5
22

33
---
44

5-
# Create a sliding menu
5+
# ساخت یک منوی کشویی
66

7-
Create a menu that opens/collapses on click:
7+
یک منویی بسازید که در زمان کلیک باز/بسته شود:
88

99
[iframe border=1 height=100 src="solution"]
1010

11-
P.S. HTML/CSS of the source document is to be modified.
11+
پی‌نوشت: سورس کد HTML/CSS سند باید تغییر کند.

‎2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11

2-
To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
2+
برای اضافه کردن دکمه می‌توانیم از `position:absoulute` (و روی pane از `position:relative` استفاده کنیم) یا اینکه از `float:right` استفاده کنیم. استفاده از `float:right` این مزیت را دارد که دکمه هیچ‌وقت روی متن قرار نمیگیرد. اما `position:absolute` ازادی عمل بیشتری در اختیار ما می‌گذار. انتخاب بر عهده شماست.
33

4-
Then for each pane the code can be like:
4+
بعد برای هر پیام کد چیزی شبیه این خواهد بود:
55
```js
66
pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
77
```
88

9-
Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
9+
سپس `<button>` همان `pane.firstChild` می‌شود. پس می‌توانیم یک کنترل‌کننده به آن اختصاص دهیم. مانند زیر:
1010

1111
```js
1212
pane.firstChild.onclick = () => pane.remove();

0 commit comments

Comments
 (0)