- Dear user, - The copying is forbidden for you. - If you know JS or HTML, then you can get everything from the page source though. +

+ کاربر عزیز, + کپی کردن برای شما ممنوع شده است. + هرچند اگر که اچ‌تی‌ام‌ال یا جاوااسکریپت بلد هستید، می‌توانید هرچه نیاز دارید از سورس صفحه پیدا کنید.

``` -If you try to copy a piece of text in the `

`, that won't work, because the default action `oncopy` is prevented. +اگر تلاش کنید که اطلاعات متنی داخل `

` را کپی کنید، کار نمی‌کند، زیرا از رفتار پیش‌فرض مرورگر در هنگام `oncopy` جلوگیری شده. -Surely the user has access to HTML-source of the page, and can take the content from there, but not everyone knows how to do it. +قاعدتا کاربر به سورس اچ‌تی‌ام‌ال صفحه دسترسی دارد، و می‌تواند هر اطلاعاتی که بخواهد از آنجا بردارد، اما هرکسی نمی‌داند چطور این‌ کار انجام می‌شود. ```` -## Summary +## خلاصه: + +رویداد‌های موس این خصوصیات‌را دارند: -Mouse events have the following properties: +- کلید: `button`. +- کلید‌های اصلاح‌کننده (`true` اگر فشار داده‌شوند): `altKey`, `ctrlKey`, `shiftKey` و `metaKey` (مک). -- Button: `button`. -- Modifier keys (`true` if pressed): `altKey`, `ctrlKey`, `shiftKey` and `metaKey` (Mac). - - If you want to handle `key:Ctrl`, then don't forget Mac users, they usually use `key:Cmd`, so it's better to check `if (e.metaKey || e.ctrlKey)`. + - اگر می‌خواهید که `key:Ctrl` را کنترل کنید، کاربران مک‌را فراموش نکنید،‌آنها معمولا از `key:Cmd` استفاده می‌کند. پس بهتر این است که `if (e.metaKey || e.ctrlKey)` چک شود. -- Window-relative coordinates: `clientX/clientY`. -- Document-relative coordinates: `pageX/pageY`. +- مختصات مربوط به پنجره: `clientX/clientY`. +- مختصاب مربوط به سند: `pageX/pageY`. -The default browser action of `mousedown` is text selection, if it's not good for the interface, then it should be prevented. +رفتار پیشفرض مروگر در هنگام `mousedown` انتخاب متن است. اگر این برای رابط کاربری شما مناسب نیست، پس باید از آن جلوگیری شود. -In the next chapter we'll see more details about events that follow pointer movement and how to track element changes under it. +در بخش بعدی ما با جزئیات بیشتری درباره رویدادهایی که حرکت اشاره‌گر موس‌را دنبال می‌کنند، و همچنین با چگونگی شناسایی تغییرات عنصر زیر آن‌ آشنا خواهیم شد. diff --git a/2-ui/3-event-details/1-mouse-events-basics/head.html b/2-ui/3-event-details/1-mouse-events-basics/head.html index 1b9a73fca..d18a97832 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/head.html +++ b/2-ui/3-event-details/1-mouse-events-basics/head.html @@ -1,50 +1,48 @@ From 18e169c263388934755af754cf51befa0238c5d9 Mon Sep 17 00:00:00 2001 From: Erfan Yeganegi Date: Fri, 10 Sep 2021 14:16:57 +0430 Subject: [PATCH 2/6] Update index.html make the requested changes. --- .../01-selectable-list/solution.view/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 68471a798..7acdd9761 100644 --- 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,4 +1,4 @@ - + From 7927eae60aa569e582a4dc529dfee64835bf69a2 Mon Sep 17 00:00:00 2001 From: Erfan Yeganegi Date: Fri, 10 Sep 2021 14:27:18 +0430 Subject: [PATCH 3/6] Revert "mouse-event-basics" This reverts commit 255c30ad8bb238165f1a2aa0e3fc072f929ce7cb. --- .../solution.view/index.html | 114 +++++----- .../01-selectable-list/source.view/index.html | 14 +- .../01-selectable-list/task.md | 14 +- .../1-mouse-events-basics/article.md | 209 +++++++++--------- .../1-mouse-events-basics/head.html | 94 ++++---- 5 files changed, 225 insertions(+), 220 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 index 7acdd9761..4d1e2ea93 100644 --- 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,58 +1,62 @@ - - - - - - - - روی یک آیتم کلیک کنید تا انتخاب شود. -
- -

کریستوفر رابین
وینی د پو
ببری
کانگا
خرگوش. فقط، خرگوش

- - - + + + + + + + + + Click on a list item to select it. +
+ +

Christopher Robin
Winnie-the-Pooh
Tigger
Kanga
Rabbit. Just rabbit.

+ + + + 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 index ea30bdd52..e18d4a994 100644 --- 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 @@ - روی یک آیتم کلیک کنید تا انتخاب شود. + Click on a list item to select it.

کریستوفر رابین
وینی د پو
ببری
کانگا
خرگوش. فقط، خرگوش
Christopher Robin
Winnie-the-Pooh
Tigger
Kanga
Rabbit. Just rabbit.

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 index d9fe3e955..8d29134ff 100644 --- 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. -- کلیک روی عنصر لیست فقط آن عنصر را انتخاب می‌کند. (کلاس `.selected` را اضافه کند)، بقیه عناصر باید لغو انتخاب شوند. -- اگر که کلیک همراه با `key:Ctrl` (`key:Cmd` برای مک) باشد، پس عمل انتخاب یا لغو انتخاب فقط برای آن عنصر عمل کند، درحالی که بقیه عنصرها تغییری نکنند. +- 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. -دمو: +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. diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 6efbc9a74..4f3be1933 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -1,212 +1,211 @@ -# رویدادهای موس +# Mouse events -در این بخش به جزئیاتی درباره‌ی رویدادهای موس و خصوصیات آن‌ها می‌پردازیم. +In this chapter we'll get into more details about mouse events and their properties. -توجه داشته باشید: این رویدادها نه تنها بواسطه "دستگاه‌های موس"، بلکه بواسطه دستگاه‌های شبیه‌سازی شده تلفن و تبلت نیز روی بدهند. +Please note: such events may come not only from "mouse devices", but are also from other devices, such as phones and tablets, where they are emulated for compatibility. -## انواع رویدادهای موس +## Mouse event types -ما قبلا با چند مورد از این رویدادها آشنا شده‌ایم: +We've already seen some of these events: `mousedown/mouseup` -: دکمه موس کلیک/رها می‌شود. +: Mouse button is clicked/released over an element. `mouseover/mouseout` -: اشاره‌گر موس روی/بیرون عنصر می‌رود. +: Mouse pointer comes over/out from an element. `mousemove` -: هر حرکت موس روی عنصر این رویداد را فرامی‌خواند. +: Every mouse move over an element triggers that event. `click` -: درصورتی که کلید چپ موس استفاده شود، این رویداد بعد از `mousedown` و سپس `mouseup‍` روی یک عنصر فراخوانده می‌شود. +: Triggers after `mousedown` and then `mouseup` over the same element if the left mouse button was used. `dblclick` -: زمانی که دو کلیک روی یک عنصر در بازه زمانی کوتاهی انجام شود فراخوانده می‌شود. امروزه به ندرت استفاده می‌شود. +: Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays. `contextmenu` -: زمانی که کلید راست موس فشرده روی یک عنصر فشرده شود فراخوانده می‌شود. راه‌های دیگری برای باز کردن منوی زمینه وجود دارد. برای مثال استفاده از یک کلید مخصوص در کیبورد این رویداد را نیز فراخوانی می‌کند، پس این دقیقا یک رویداد موس نیست.‌ +: Triggers when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it's not exactly the mouse event. -...چندین رویداد دیگر وجود دارند که بعدا آنهارا برسی می‌کنیم. +...There are several other events too, we'll cover them later. -## ترتیب رویدادها +## Events order -همان‌طور که در لیست بالاهم مشاهده کردید، یک عمل کاربر می‌تواند باعث فراخوانی چند رویداد شود. +As you can see from the list above, a user action may trigger multiple events. -برای مثال، یک کلیک چپ ابتدا `mousedown‍` را فراخوانی می‌کند، هنگامی که کلید فشرده می‌شود، سپس `mouseup‍` و `click` زمانی که کلید رها می‌شود. +For instance, a left-button click first triggers `mousedown`, when the button is pressed, then `mouseup` and `click` when it's released. -در مواقعی که یک عمل از سمت کاربر باعث فراخوانی چند رویداد شود، ترتیب آنها ثابت خواهد بود. به این معنی که کنترل‌کننده‌ها به ترتیب `mousedown` -> `mouseup` -> `click` صدا زده خواهند شد. +In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order `mousedown` -> `mouseup` -> `click`. ```online -روی دکمه زیر کلیک کنید تا رویدادها را ببینید. دابل کلیک را هم امتحان کنید. +Click the button below and you'll see the events. Try double-click too. -در قسمت آزمایشی زیر همه رویدادها چاپ می‌شوند، و اگر بیش از ۱ ثانیه فاصله زمانی بین آنها باشد توسط یک خط افقی جدا می‌شوند. +On the teststand below all mouse events are logged, and if there is more than a 1 second delay between them they are separated by a horizontal ruler. -همچنین می‌توانیم یک خاصیت `button` مشاهده کنیم که به ما این امکان را می‌دهد تا کلید موس را شناسایی کنیم که در قسمت پایین شرح داده شده. +Also we can see the `button` property that allows to detect the mouse button, it's explained below. - + ``` -## کلید موس +## Mouse button -رویدادهای مربوط به کلیک‌کردن همیشه یک خاصیت `button` خواهند داشت، که به ما این امکان را می‌دهد کلید موس را دقیقا تشخیص دهیم. +Click-related events always have the `button` property, which allows to get the exact mouse button. -ما معمولا این خاصیت را برای رویدادهای `click` و `contextmenu` استفاده نمی‌کنیم،‌ زیرا اولی فقط با کلیک چپ، و دومی با کلیک راست اتفاق می‌افتد. +We usually don't use it for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click. -از طرف دیگر، کنترل‌کننده‌های `mousedown` و `mouseup‍‍` ممکن است به `event.button` نیاز پیدا کنند، زیرا این رویدادها به واسطه هر کلیدی اتفاق می‌افتند، پس `button` این امکان را می‌دهد تا "کلیک کلید راست" و "کلیک کلید چپ" موس را تشخیص دهیم. +From the other hand, `mousedown` and `mouseup` handlers may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". -مقادیر قابل قبول برای `event.button`: +The possible values of `event.button` are: -| `event.button` | وضعیت کلید | -| -------------- | ----------------- | -| 0 | کلید چپ (اصلی) | -| 1 | کلید وسط (کمکی) | -| 2 | کلید راست (ثانوی) | -| 3 | کلید X1 (عقب) | -| 4 | کلید X2 (جلو) | +| Button state | `event.button` | +|--------------|----------------| +| Left button (primary) | 0 | +| Middle button (auxiliary) | 1 | +| Right button (secondary) | 2 | +| X1 button (back) | 3 | +| X2 button (forward) | 4 | -بیشتر موس‌ها فقط کلید چپ و راست را دارند، پس مقادیر احتمالی `0` و `2` هستند. دستگاه‌های لمسی نیز هنگامی که روی آنها ضربه زده شود رفتار مشابهی‌ را ایجاد می‌کنند. +Most mouse devices only have the left and right buttons, so possible values are `0` or `2`. Touch devices also generate similar events when one taps on them. -همچنین خصوصیت `event.buttons` همه کلیدهایی که هم اکنون فشرده شده‌اند را دارد، یک بیت به ازای هر کلید. در عمل این خصوصیت به ندرت استفاده می‌شود، در صورت نیاز، می‌توانید جزئیات بیشتری را [MDN](mdn:/api/MouseEvent/buttons) پیدا کنید. +Also there's `event.buttons` property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at [MDN](mdn:/api/MouseEvent/buttons) if you ever need it. -```warn header="`event.which`منسوخ شده" کدهای قدیمی احتمالا از خاصیت`event.which` استفاده کرده‌اند که یک روش غیر استاندارد برای گرفتن کلید ها است. مقادیر احتمالی به صورت زیر است: +```warn header="The outdated `event.which`" +Old code may use `event.which` property that's an old non-standard way of getting a button, with possible values: -- `event.which == 1` – کلید چپ, -- `event.which == 2` – کلید وسط, -- `event.which == 3` – کلید راست. +- `event.which == 1` – left button, +- `event.which == 2` – middle button, +- `event.which == 3` – right button. -به دلیل اینکه ‍`event.which` منسوخ شده، نباید از از آن استفاده کنیم. - -```` +As of now, `event.which` is deprecated, we shouldn't use it. +``` -## اصلاح‌کننده‌ها: shift, alt, ctrl و meta +## Modifiers: shift, alt, ctrl and meta -همه رویدادهای موس اطلاعاتی درباره کلیدهای اصلاح‌کننده دارند. +All mouse events include the information about pressed modifier keys. -خصوصیات رویداد: +Event properties: - `shiftKey`: `key:Shift` -- `altKey`: `key:Alt` (یا `key:Opt` برای مک) +- `altKey`: `key:Alt` (or `key:Opt` for Mac) - `ctrlKey`: `key:Ctrl` -- `metaKey`: `key:Cmd` برای مک +- `metaKey`: `key:Cmd` for Mac -مقادیر آنها در صورتی که کلید اشاره‌شده در حین رویداد فشرده شده بود، `true` است. +They are `true` if the corresponding key was pressed during the event. -برای مثال، کلید زیر تنها روی `key:Alt+Shift`+کلیک کار می‌کند: +For instance, the button below only works on `key:Alt+Shift`+click: ```html autorun height=60 - + -```` - -```warn header="توجه: روی مک معمولا `Cmd`بجای`Ctrl`خواهد بود" روی ویندوز و لینوکس کلیدهای اصلاح‌کننده `key:Alt`, `key:Shift`و`key:Ctrl`وجود خواهد داشت. روی مک یک کلید دیگر نیز وجود دارد: `key:Cmd`, متناظر خاصیت `metaKey`. +``` -در بیشتر اپلیکیشن‌ها هنگامی که در ونیدوز/لینوکس از `key:Ctrl` استفاده می‌شود، روی مک `key:Cmd` خواهد بود. +```warn header="Attention: on Mac it's usually `Cmd` instead of `Ctrl`" +On Windows and Linux there are modifier keys `key:Alt`, `key:Shift` and `key:Ctrl`. On Mac there's one more: `key:Cmd`, corresponding to the property `metaKey`. -به این معنی که: وقتی یک کاربر ویندوز کلید `key:Ctrl+Enter` یا `key:Ctrl+A` را می‌فشارد، یک کاربر مک باید `key:Cmd+Enter` یا `key:Cmd+A` را فشار دهد، مشابه برای بقیه کلیدها. +In most applications, when Windows/Linux uses `key:Ctrl`, on Mac `key:Cmd` is used. -پس اگر میخواهیم ترکیبی مانند `key:Ctrl`+کلیک را پشتیبانی کنیم، پس برای مک باید از `key:Cmd`+کلیک استفاده کنیم. این ترکیب برای کاربران مک راحت‌تر خواهد بود. +That is: where a Windows user presses `key:Ctrl+Enter` or `key:Ctrl+A`, a Mac user would press `key:Cmd+Enter` or `key:Cmd+A`, and so on. -حتی اگر میخواستیم که کاربر مک را وادار کنیم که از `key:Ctrl`+کلیک استفاده کند، دشوار خواهد بود. مشکل این است که: یک چپ-کلیک با `key:Ctrl` همانند یک _right-click_ شناخته می‌شود، و رویداد `contextmenu` اتفاق می‌افتد، نه اینکه مانند ویندوز/لینوکس رویداد`click` اتفاق بیفتد. +So if we want to support combinations like `key:Ctrl`+click, then for Mac it makes sense to use `key:Cmd`+click. That's more comfortable for Mac users. -پس اگر می‌خواهیم که کاربران همه سیستم‌های عامل احساس راحتی داشته باشند، پس همراه `ctrlKey` باید `metaKey` را نیز چک کنیم. +Even if we'd like to force Mac users to `key:Ctrl`+click -- that's kind of difficult. The problem is: a left-click with `key:Ctrl` is interpreted as a *right-click* on MacOS, and it generates the `contextmenu` event, not `click` like Windows/Linux. -در کد جاوااسکریپت به این معنی است که میخواهیم ‍`if (event.ctrlKey || event.metaKey)` را چک کنیم. +So if we want users of all operating systems to feel comfortable, then together with `ctrlKey` we should check `metaKey`. -```` +For JS-code it means that we should check `if (event.ctrlKey || event.metaKey)`. +``` -```warn header="همچنین دستگاه‌های موبایل نیز وجود دارند" -ترکیب‌های کلید‌های کیبورد به عنوان یک قابلیت اضافه خوب هستند. اگر کاربر از کیبورد استفاده کند، کار می‌کنند. +```warn header="There are also mobile devices" +Keyboard combinations are good as an addition to the workflow. So that if the visitor uses a keyboard -- they work. -اما اگر دستگاه آنها کیبورد نداشته باشد، پس باید راهی برای زندگی کردن بدون از کلیدهای اصلاح‌کننده باشد. -```` +But if their device doesn't have it -- then there should be a way to live without modifier keys. +``` -## مختصات: clientX/Y, pageX/Y +## Coordinates: clientX/Y, pageX/Y -همه رویدادهای موس مختصاتی را به دو صورت در اختیار ما قرار می‌دهند: +All mouse events provide coordinates in two flavours: -1. مربوط به پنجره: `clientX` و `clientY`. -2. مربوط به سند: `pageX` و `pageY`. +1. Window-relative: `clientX` and `clientY`. +2. Document-relative: `pageX` and `pageY`. -ما قبلا درباره تفاوت آنها در بخش صحبت کرده‌ایم. +We already covered the difference between them in the chapter . -به اختصار، مختصات مربوط به سند `pageX/Y` از گوشه‌ی بالا چپ سند محاسبه می‌شوند و زمانی که صفحه پیمایش شود تغییر نمی‌کنند، درصورتی که `clientX/Y` از گوشه بالا چپ پنجره فعلی شمرده می‌شوند. زمانی که صفحه پیمایش شود، تفییر می‌کنند. +In short, document-relative coordinates `pageX/Y` are counted from the left-upper corner of the document, and do not change when the page is scrolled, while `clientX/Y` are counted from the current window left-upper corner. When the page is scrolled, they change. -برای مثال، اگر یک پنجره با اندازه 500x500 داشته باشیم، و اشاره‌گر موس در گوشه بالا چپ باشد، پس `clientX` و `clientY` مقدار `0` خواهند داشت، بدون توجه به اینکه صفحه چقدر پیمایش شده باشد. +For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then `clientX` and `clientY` are `0`, no matter how the page is scrolled. -و اگر اشاره‌گر موس در وسط باشد، پس `clientX` و `clientY` مقدار `250` خواهند داشت بدون توجه به اینکه کجای سند قرار دارند. از این نظر مانند `position:fixed` هستند. +And if the mouse is in the center, then `clientX` and `clientY` are `250`, no matter what place in the document it is. They are similar to `position:fixed` in that aspect. ````online -موس را روی قسمت ورودی ببرید تا مقادیر `clientX/clientY` ببینید (مثال در `iframe` وجود دارد, پس مقادیر نسبت به آن `iframe` خواهند بود): +Move the mouse over the input field to see `clientX/clientY` (the example is in the `iframe`, so coordinates are relative to that `iframe`): ```html autorun height=50 - + ``` ```` -## جلوگیری از انتخاب در هنگام mousedown +## Preventing selection on mousedown -دابل کلیک موس یک اثر جانبی دارد که در بعضی از رابطه‌های کاربری مزاحم است: متن را انتخاب می‌کند. +Double mouse click has a side-effect that may be disturbing in some interfaces: it selects text. -برای مثال، دابل کلیک کردن روی متن زیر آنرا انتخاب می‌کند که در کنترل‌کندده ما تعریف نشده: +For instance, double-clicking on the text below selects it in addition to our handler: ```html autorun height=50 -من را دوبار کلیک کن +Double-click me ``` -اگر یک نفر کلید چپ موس را فشار دهد، بدون رها کردن آن، اشاره‌گر موس را جابجا کند، بیشتر اوقات متن را انتخاب می‌کند که ممکن است باب میل ما نباشد. +If one presses the left mouse button and, without releasing it, moves the mouse, that also makes the selection, often unwanted. -راه های مختلفی برای جلوگیری از آن انتخاب وجود دارد، که می‌توانید در بخش مشاهده کنید. +There are multiple ways to prevent the selection, that you can read in the chapter . -منطقی‌ترین راه در این مورد به خصوص این است که از رفتار پیش‌فرض مرورگر هنگام `mousedown` جلوگیری کنیم. این کد از انتخاب هر دو این‌ها جلوگیری می‌کند: +In this particular case the most reasonable way is to prevent the browser action on `mousedown`. It prevents both these selections: ```html autorun height=50 -قبل... - - من را دوبار کلیک کن +Before... + + Double-click me -...بعد +...After ``` -اکنون قسمت پررنگ، هنگام دابل کلیک قابل انتخاب نیست و کلیک چپ روی آن، انتخاب کردن متن را آغاز نمی‌کند.‎ +Now the bold element is not selected on double clicks, and pressing the left button on it won't start the selection. -توجه داشته باشید: متن داخل آن هنوز قابل انتخاب است. هرچند، انتخاب نباید از روی خود متن، بلکه از قبل یا بعد آن آغاز شود. معمولا کاربران با این رفتار مشکلی ندارند. +Please note: the text inside it is still selectable. However, the selection should start not on the text itself, but before or after it. Usually that's fine for users. -````smart header="جلوگیری از کپی کردن" -اگر می‌خواهیم که انتخاب شدن متن‌را به منظور محافظت کردن از اطلاعات صفحه در مقابل کپی شدن انجام دهیم، می‌توانیم از یک رویداد دیگر استفاده کینم: `oncopy`. +````smart header="Preventing copying" +If we want to disable selection to protect our page content from copy-pasting, then we can use another event: `oncopy`. ```html autorun height=80 no-beautify -
- کاربر عزیز, - کپی کردن برای شما ممنوع شده است. - هرچند اگر که اچ‌تی‌ام‌ال یا جاوااسکریپت بلد هستید، می‌توانید هرچه نیاز دارید از سورس صفحه پیدا کنید. +
+ Dear user, + The copying is forbidden for you. + If you know JS or HTML, then you can get everything from the page source though.
``` -اگر تلاش کنید که اطلاعات متنی داخل `
` را کپی کنید، کار نمی‌کند، زیرا از رفتار پیش‌فرض مرورگر در هنگام `oncopy` جلوگیری شده. +If you try to copy a piece of text in the `
`, that won't work, because the default action `oncopy` is prevented. -قاعدتا کاربر به سورس اچ‌تی‌ام‌ال صفحه دسترسی دارد، و می‌تواند هر اطلاعاتی که بخواهد از آنجا بردارد، اما هرکسی نمی‌داند چطور این‌ کار انجام می‌شود. +Surely the user has access to HTML-source of the page, and can take the content from there, but not everyone knows how to do it. ```` -## خلاصه: - -رویداد‌های موس این خصوصیات‌را دارند: +## Summary -- کلید: `button`. -- کلید‌های اصلاح‌کننده (`true` اگر فشار داده‌شوند): `altKey`, `ctrlKey`, `shiftKey` و `metaKey` (مک). +Mouse events have the following properties: - - اگر می‌خواهید که `key:Ctrl` را کنترل کنید، کاربران مک‌را فراموش نکنید،‌آنها معمولا از `key:Cmd` استفاده می‌کند. پس بهتر این است که `if (e.metaKey || e.ctrlKey)` چک شود. +- Button: `button`. +- Modifier keys (`true` if pressed): `altKey`, `ctrlKey`, `shiftKey` and `metaKey` (Mac). + - If you want to handle `key:Ctrl`, then don't forget Mac users, they usually use `key:Cmd`, so it's better to check `if (e.metaKey || e.ctrlKey)`. -- مختصات مربوط به پنجره: `clientX/clientY`. -- مختصاب مربوط به سند: `pageX/pageY`. +- Window-relative coordinates: `clientX/clientY`. +- Document-relative coordinates: `pageX/pageY`. -رفتار پیشفرض مروگر در هنگام `mousedown` انتخاب متن است. اگر این برای رابط کاربری شما مناسب نیست، پس باید از آن جلوگیری شود. +The default browser action of `mousedown` is text selection, if it's not good for the interface, then it should be prevented. -در بخش بعدی ما با جزئیات بیشتری درباره رویدادهایی که حرکت اشاره‌گر موس‌را دنبال می‌کنند، و همچنین با چگونگی شناسایی تغییرات عنصر زیر آن‌ آشنا خواهیم شد. +In the next chapter we'll see more details about events that follow pointer movement and how to track element changes under it. diff --git a/2-ui/3-event-details/1-mouse-events-basics/head.html b/2-ui/3-event-details/1-mouse-events-basics/head.html index d18a97832..1b9a73fca 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/head.html +++ b/2-ui/3-event-details/1-mouse-events-basics/head.html @@ -1,48 +1,50 @@ From 65a7114e12bb23cdd55c23a3d06c46569874802f Mon Sep 17 00:00:00 2001 From: Erfan Yeganegi Date: Fri, 10 Sep 2021 14:28:44 +0430 Subject: [PATCH 4/6] Update article.md made the requested changes and improved translation. --- .../1-mouse-events-basics/article.md | 209 +++++++++--------- 1 file changed, 105 insertions(+), 104 deletions(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 4f3be1933..6efbc9a74 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -1,211 +1,212 @@ -# Mouse events +# رویدادهای موس -In this chapter we'll get into more details about mouse events and their properties. +در این بخش به جزئیاتی درباره‌ی رویدادهای موس و خصوصیات آن‌ها می‌پردازیم. -Please note: such events may come not only from "mouse devices", but are also from other devices, such as phones and tablets, where they are emulated for compatibility. +توجه داشته باشید: این رویدادها نه تنها بواسطه "دستگاه‌های موس"، بلکه بواسطه دستگاه‌های شبیه‌سازی شده تلفن و تبلت نیز روی بدهند. -## Mouse event types +## انواع رویدادهای موس -We've already seen some of these events: +ما قبلا با چند مورد از این رویدادها آشنا شده‌ایم: `mousedown/mouseup` -: Mouse button is clicked/released over an element. +: دکمه موس کلیک/رها می‌شود. `mouseover/mouseout` -: Mouse pointer comes over/out from an element. +: اشاره‌گر موس روی/بیرون عنصر می‌رود. `mousemove` -: Every mouse move over an element triggers that event. +: هر حرکت موس روی عنصر این رویداد را فرامی‌خواند. `click` -: Triggers after `mousedown` and then `mouseup` over the same element if the left mouse button was used. +: درصورتی که کلید چپ موس استفاده شود، این رویداد بعد از `mousedown` و سپس `mouseup‍` روی یک عنصر فراخوانده می‌شود. `dblclick` -: Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays. +: زمانی که دو کلیک روی یک عنصر در بازه زمانی کوتاهی انجام شود فراخوانده می‌شود. امروزه به ندرت استفاده می‌شود. `contextmenu` -: Triggers when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it's not exactly the mouse event. +: زمانی که کلید راست موس فشرده روی یک عنصر فشرده شود فراخوانده می‌شود. راه‌های دیگری برای باز کردن منوی زمینه وجود دارد. برای مثال استفاده از یک کلید مخصوص در کیبورد این رویداد را نیز فراخوانی می‌کند، پس این دقیقا یک رویداد موس نیست.‌ -...There are several other events too, we'll cover them later. +...چندین رویداد دیگر وجود دارند که بعدا آنهارا برسی می‌کنیم. -## Events order +## ترتیب رویدادها -As you can see from the list above, a user action may trigger multiple events. +همان‌طور که در لیست بالاهم مشاهده کردید، یک عمل کاربر می‌تواند باعث فراخوانی چند رویداد شود. -For instance, a left-button click first triggers `mousedown`, when the button is pressed, then `mouseup` and `click` when it's released. +برای مثال، یک کلیک چپ ابتدا `mousedown‍` را فراخوانی می‌کند، هنگامی که کلید فشرده می‌شود، سپس `mouseup‍` و `click` زمانی که کلید رها می‌شود. -In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order `mousedown` -> `mouseup` -> `click`. +در مواقعی که یک عمل از سمت کاربر باعث فراخوانی چند رویداد شود، ترتیب آنها ثابت خواهد بود. به این معنی که کنترل‌کننده‌ها به ترتیب `mousedown` -> `mouseup` -> `click` صدا زده خواهند شد. ```online -Click the button below and you'll see the events. Try double-click too. +روی دکمه زیر کلیک کنید تا رویدادها را ببینید. دابل کلیک را هم امتحان کنید. -On the teststand below all mouse events are logged, and if there is more than a 1 second delay between them they are separated by a horizontal ruler. +در قسمت آزمایشی زیر همه رویدادها چاپ می‌شوند، و اگر بیش از ۱ ثانیه فاصله زمانی بین آنها باشد توسط یک خط افقی جدا می‌شوند. -Also we can see the `button` property that allows to detect the mouse button, it's explained below. +همچنین می‌توانیم یک خاصیت `button` مشاهده کنیم که به ما این امکان را می‌دهد تا کلید موس را شناسایی کنیم که در قسمت پایین شرح داده شده. -

+

``` -## Mouse button +## کلید موس -Click-related events always have the `button` property, which allows to get the exact mouse button. +رویدادهای مربوط به کلیک‌کردن همیشه یک خاصیت `button` خواهند داشت، که به ما این امکان را می‌دهد کلید موس را دقیقا تشخیص دهیم. -We usually don't use it for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click. +ما معمولا این خاصیت را برای رویدادهای `click` و `contextmenu` استفاده نمی‌کنیم،‌ زیرا اولی فقط با کلیک چپ، و دومی با کلیک راست اتفاق می‌افتد. -From the other hand, `mousedown` and `mouseup` handlers may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". +از طرف دیگر، کنترل‌کننده‌های `mousedown` و `mouseup‍‍` ممکن است به `event.button` نیاز پیدا کنند، زیرا این رویدادها به واسطه هر کلیدی اتفاق می‌افتند، پس `button` این امکان را می‌دهد تا "کلیک کلید راست" و "کلیک کلید چپ" موس را تشخیص دهیم. -The possible values of `event.button` are: +مقادیر قابل قبول برای `event.button`: -| Button state | `event.button` | -|--------------|----------------| -| Left button (primary) | 0 | -| Middle button (auxiliary) | 1 | -| Right button (secondary) | 2 | -| X1 button (back) | 3 | -| X2 button (forward) | 4 | +| `event.button` | وضعیت کلید | +| -------------- | ----------------- | +| 0 | کلید چپ (اصلی) | +| 1 | کلید وسط (کمکی) | +| 2 | کلید راست (ثانوی) | +| 3 | کلید X1 (عقب) | +| 4 | کلید X2 (جلو) | -Most mouse devices only have the left and right buttons, so possible values are `0` or `2`. Touch devices also generate similar events when one taps on them. +بیشتر موس‌ها فقط کلید چپ و راست را دارند، پس مقادیر احتمالی `0` و `2` هستند. دستگاه‌های لمسی نیز هنگامی که روی آنها ضربه زده شود رفتار مشابهی‌ را ایجاد می‌کنند. -Also there's `event.buttons` property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at [MDN](mdn:/api/MouseEvent/buttons) if you ever need it. +همچنین خصوصیت `event.buttons` همه کلیدهایی که هم اکنون فشرده شده‌اند را دارد، یک بیت به ازای هر کلید. در عمل این خصوصیت به ندرت استفاده می‌شود، در صورت نیاز، می‌توانید جزئیات بیشتری را [MDN](mdn:/api/MouseEvent/buttons) پیدا کنید. -```warn header="The outdated `event.which`" -Old code may use `event.which` property that's an old non-standard way of getting a button, with possible values: +```warn header="`event.which`منسوخ شده" کدهای قدیمی احتمالا از خاصیت`event.which` استفاده کرده‌اند که یک روش غیر استاندارد برای گرفتن کلید ها است. مقادیر احتمالی به صورت زیر است: -- `event.which == 1` – left button, -- `event.which == 2` – middle button, -- `event.which == 3` – right button. +- `event.which == 1` – کلید چپ, +- `event.which == 2` – کلید وسط, +- `event.which == 3` – کلید راست. -As of now, `event.which` is deprecated, we shouldn't use it. -``` +به دلیل اینکه ‍`event.which` منسوخ شده، نباید از از آن استفاده کنیم. + +```` -## Modifiers: shift, alt, ctrl and meta +## اصلاح‌کننده‌ها: shift, alt, ctrl و meta -All mouse events include the information about pressed modifier keys. +همه رویدادهای موس اطلاعاتی درباره کلیدهای اصلاح‌کننده دارند. -Event properties: +خصوصیات رویداد: - `shiftKey`: `key:Shift` -- `altKey`: `key:Alt` (or `key:Opt` for Mac) +- `altKey`: `key:Alt` (یا `key:Opt` برای مک) - `ctrlKey`: `key:Ctrl` -- `metaKey`: `key:Cmd` for Mac +- `metaKey`: `key:Cmd` برای مک -They are `true` if the corresponding key was pressed during the event. +مقادیر آنها در صورتی که کلید اشاره‌شده در حین رویداد فشرده شده بود، `true` است. -For instance, the button below only works on `key:Alt+Shift`+click: +برای مثال، کلید زیر تنها روی `key:Alt+Shift`+کلیک کار می‌کند: ```html autorun height=60 - + -``` +```` -```warn header="Attention: on Mac it's usually `Cmd` instead of `Ctrl`" -On Windows and Linux there are modifier keys `key:Alt`, `key:Shift` and `key:Ctrl`. On Mac there's one more: `key:Cmd`, corresponding to the property `metaKey`. +```warn header="توجه: روی مک معمولا `Cmd`بجای`Ctrl`خواهد بود" روی ویندوز و لینوکس کلیدهای اصلاح‌کننده `key:Alt`, `key:Shift`و`key:Ctrl`وجود خواهد داشت. روی مک یک کلید دیگر نیز وجود دارد: `key:Cmd`, متناظر خاصیت `metaKey`. -In most applications, when Windows/Linux uses `key:Ctrl`, on Mac `key:Cmd` is used. +در بیشتر اپلیکیشن‌ها هنگامی که در ونیدوز/لینوکس از `key:Ctrl` استفاده می‌شود، روی مک `key:Cmd` خواهد بود. -That is: where a Windows user presses `key:Ctrl+Enter` or `key:Ctrl+A`, a Mac user would press `key:Cmd+Enter` or `key:Cmd+A`, and so on. +به این معنی که: وقتی یک کاربر ویندوز کلید `key:Ctrl+Enter` یا `key:Ctrl+A` را می‌فشارد، یک کاربر مک باید `key:Cmd+Enter` یا `key:Cmd+A` را فشار دهد، مشابه برای بقیه کلیدها. -So if we want to support combinations like `key:Ctrl`+click, then for Mac it makes sense to use `key:Cmd`+click. That's more comfortable for Mac users. +پس اگر میخواهیم ترکیبی مانند `key:Ctrl`+کلیک را پشتیبانی کنیم، پس برای مک باید از `key:Cmd`+کلیک استفاده کنیم. این ترکیب برای کاربران مک راحت‌تر خواهد بود. -Even if we'd like to force Mac users to `key:Ctrl`+click -- that's kind of difficult. The problem is: a left-click with `key:Ctrl` is interpreted as a *right-click* on MacOS, and it generates the `contextmenu` event, not `click` like Windows/Linux. +حتی اگر میخواستیم که کاربر مک را وادار کنیم که از `key:Ctrl`+کلیک استفاده کند، دشوار خواهد بود. مشکل این است که: یک چپ-کلیک با `key:Ctrl` همانند یک _right-click_ شناخته می‌شود، و رویداد `contextmenu` اتفاق می‌افتد، نه اینکه مانند ویندوز/لینوکس رویداد`click` اتفاق بیفتد. -So if we want users of all operating systems to feel comfortable, then together with `ctrlKey` we should check `metaKey`. +پس اگر می‌خواهیم که کاربران همه سیستم‌های عامل احساس راحتی داشته باشند، پس همراه `ctrlKey` باید `metaKey` را نیز چک کنیم. -For JS-code it means that we should check `if (event.ctrlKey || event.metaKey)`. -``` +در کد جاوااسکریپت به این معنی است که میخواهیم ‍`if (event.ctrlKey || event.metaKey)` را چک کنیم. -```warn header="There are also mobile devices" -Keyboard combinations are good as an addition to the workflow. So that if the visitor uses a keyboard -- they work. +```` -But if their device doesn't have it -- then there should be a way to live without modifier keys. -``` +```warn header="همچنین دستگاه‌های موبایل نیز وجود دارند" +ترکیب‌های کلید‌های کیبورد به عنوان یک قابلیت اضافه خوب هستند. اگر کاربر از کیبورد استفاده کند، کار می‌کنند. -## Coordinates: clientX/Y, pageX/Y +اما اگر دستگاه آنها کیبورد نداشته باشد، پس باید راهی برای زندگی کردن بدون از کلیدهای اصلاح‌کننده باشد. +```` -All mouse events provide coordinates in two flavours: +## مختصات: clientX/Y, pageX/Y -1. Window-relative: `clientX` and `clientY`. -2. Document-relative: `pageX` and `pageY`. +همه رویدادهای موس مختصاتی را به دو صورت در اختیار ما قرار می‌دهند: -We already covered the difference between them in the chapter . +1. مربوط به پنجره: `clientX` و `clientY`. +2. مربوط به سند: `pageX` و `pageY`. -In short, document-relative coordinates `pageX/Y` are counted from the left-upper corner of the document, and do not change when the page is scrolled, while `clientX/Y` are counted from the current window left-upper corner. When the page is scrolled, they change. +ما قبلا درباره تفاوت آنها در بخش صحبت کرده‌ایم. -For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then `clientX` and `clientY` are `0`, no matter how the page is scrolled. +به اختصار، مختصات مربوط به سند `pageX/Y` از گوشه‌ی بالا چپ سند محاسبه می‌شوند و زمانی که صفحه پیمایش شود تغییر نمی‌کنند، درصورتی که `clientX/Y` از گوشه بالا چپ پنجره فعلی شمرده می‌شوند. زمانی که صفحه پیمایش شود، تفییر می‌کنند. -And if the mouse is in the center, then `clientX` and `clientY` are `250`, no matter what place in the document it is. They are similar to `position:fixed` in that aspect. +برای مثال، اگر یک پنجره با اندازه 500x500 داشته باشیم، و اشاره‌گر موس در گوشه بالا چپ باشد، پس `clientX` و `clientY` مقدار `0` خواهند داشت، بدون توجه به اینکه صفحه چقدر پیمایش شده باشد. + +و اگر اشاره‌گر موس در وسط باشد، پس `clientX` و `clientY` مقدار `250` خواهند داشت بدون توجه به اینکه کجای سند قرار دارند. از این نظر مانند `position:fixed` هستند. ````online -Move the mouse over the input field to see `clientX/clientY` (the example is in the `iframe`, so coordinates are relative to that `iframe`): +موس را روی قسمت ورودی ببرید تا مقادیر `clientX/clientY` ببینید (مثال در `iframe` وجود دارد, پس مقادیر نسبت به آن `iframe` خواهند بود): ```html autorun height=50 - + ``` ```` -## Preventing selection on mousedown +## جلوگیری از انتخاب در هنگام mousedown -Double mouse click has a side-effect that may be disturbing in some interfaces: it selects text. +دابل کلیک موس یک اثر جانبی دارد که در بعضی از رابطه‌های کاربری مزاحم است: متن را انتخاب می‌کند. -For instance, double-clicking on the text below selects it in addition to our handler: +برای مثال، دابل کلیک کردن روی متن زیر آنرا انتخاب می‌کند که در کنترل‌کندده ما تعریف نشده: ```html autorun height=50 -Double-click me +من را دوبار کلیک کن ``` -If one presses the left mouse button and, without releasing it, moves the mouse, that also makes the selection, often unwanted. +اگر یک نفر کلید چپ موس را فشار دهد، بدون رها کردن آن، اشاره‌گر موس را جابجا کند، بیشتر اوقات متن را انتخاب می‌کند که ممکن است باب میل ما نباشد. -There are multiple ways to prevent the selection, that you can read in the chapter . +راه های مختلفی برای جلوگیری از آن انتخاب وجود دارد، که می‌توانید در بخش مشاهده کنید. -In this particular case the most reasonable way is to prevent the browser action on `mousedown`. It prevents both these selections: +منطقی‌ترین راه در این مورد به خصوص این است که از رفتار پیش‌فرض مرورگر هنگام `mousedown` جلوگیری کنیم. این کد از انتخاب هر دو این‌ها جلوگیری می‌کند: ```html autorun height=50 -Before... - - Double-click me +قبل... + + من را دوبار کلیک کن -...After +...بعد ``` -Now the bold element is not selected on double clicks, and pressing the left button on it won't start the selection. +اکنون قسمت پررنگ، هنگام دابل کلیک قابل انتخاب نیست و کلیک چپ روی آن، انتخاب کردن متن را آغاز نمی‌کند.‎ -Please note: the text inside it is still selectable. However, the selection should start not on the text itself, but before or after it. Usually that's fine for users. +توجه داشته باشید: متن داخل آن هنوز قابل انتخاب است. هرچند، انتخاب نباید از روی خود متن، بلکه از قبل یا بعد آن آغاز شود. معمولا کاربران با این رفتار مشکلی ندارند. -````smart header="Preventing copying" -If we want to disable selection to protect our page content from copy-pasting, then we can use another event: `oncopy`. +````smart header="جلوگیری از کپی کردن" +اگر می‌خواهیم که انتخاب شدن متن‌را به منظور محافظت کردن از اطلاعات صفحه در مقابل کپی شدن انجام دهیم، می‌توانیم از یک رویداد دیگر استفاده کینم: `oncopy`. ```html autorun height=80 no-beautify -
- Dear user, - The copying is forbidden for you. - If you know JS or HTML, then you can get everything from the page source though. +
+ کاربر عزیز, + کپی کردن برای شما ممنوع شده است. + هرچند اگر که اچ‌تی‌ام‌ال یا جاوااسکریپت بلد هستید، می‌توانید هرچه نیاز دارید از سورس صفحه پیدا کنید.
``` -If you try to copy a piece of text in the `
`, that won't work, because the default action `oncopy` is prevented. +اگر تلاش کنید که اطلاعات متنی داخل `
` را کپی کنید، کار نمی‌کند، زیرا از رفتار پیش‌فرض مرورگر در هنگام `oncopy` جلوگیری شده. -Surely the user has access to HTML-source of the page, and can take the content from there, but not everyone knows how to do it. +قاعدتا کاربر به سورس اچ‌تی‌ام‌ال صفحه دسترسی دارد، و می‌تواند هر اطلاعاتی که بخواهد از آنجا بردارد، اما هرکسی نمی‌داند چطور این‌ کار انجام می‌شود. ```` -## Summary +## خلاصه: + +رویداد‌های موس این خصوصیات‌را دارند: -Mouse events have the following properties: +- کلید: `button`. +- کلید‌های اصلاح‌کننده (`true` اگر فشار داده‌شوند): `altKey`, `ctrlKey`, `shiftKey` و `metaKey` (مک). -- Button: `button`. -- Modifier keys (`true` if pressed): `altKey`, `ctrlKey`, `shiftKey` and `metaKey` (Mac). - - If you want to handle `key:Ctrl`, then don't forget Mac users, they usually use `key:Cmd`, so it's better to check `if (e.metaKey || e.ctrlKey)`. + - اگر می‌خواهید که `key:Ctrl` را کنترل کنید، کاربران مک‌را فراموش نکنید،‌آنها معمولا از `key:Cmd` استفاده می‌کند. پس بهتر این است که `if (e.metaKey || e.ctrlKey)` چک شود. -- Window-relative coordinates: `clientX/clientY`. -- Document-relative coordinates: `pageX/pageY`. +- مختصات مربوط به پنجره: `clientX/clientY`. +- مختصاب مربوط به سند: `pageX/pageY`. -The default browser action of `mousedown` is text selection, if it's not good for the interface, then it should be prevented. +رفتار پیشفرض مروگر در هنگام `mousedown` انتخاب متن است. اگر این برای رابط کاربری شما مناسب نیست، پس باید از آن جلوگیری شود. -In the next chapter we'll see more details about events that follow pointer movement and how to track element changes under it. +در بخش بعدی ما با جزئیات بیشتری درباره رویدادهایی که حرکت اشاره‌گر موس‌را دنبال می‌کنند، و همچنین با چگونگی شناسایی تغییرات عنصر زیر آن‌ آشنا خواهیم شد. From 550e42cf844e0a8f883370b4df5dac3830af63c7 Mon Sep 17 00:00:00 2001 From: Erfan Yeganegi Date: Fri, 10 Sep 2021 14:33:47 +0430 Subject: [PATCH 5/6] requested changes done --- .../01-selectable-list/solution.view/index.html | 14 +++++++------- .../01-selectable-list/source.view/index.html | 14 +++++++------- .../01-selectable-list/task.md | 14 +++++++------- .../1-mouse-events-basics/head.html | 2 +- 4 files changed, 22 insertions(+), 22 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 index 4d1e2ea93..b134553c8 100644 --- 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 @@ -16,15 +16,15 @@ - Click on a list item to select it. + روی یک آیتم کلیک کنید تا انتخاب شود.

-
Christopher Robin
-
Winnie-the-Pooh
-
Tigger
-
Kanga
-
Rabbit. Just rabbit.
+
کریستوفر رابین
+
وینی د پو
+
ببری
+
کانگا
+
خرگوش. فقط خرگوش

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 index 8d29134ff..16186372b 100644 --- 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. +پی‌نوشت: از رفتار پیش‌فرض مرورگر که باعث انتخاب متن هنگام کلیک کردن می‌شود جلوگیری کنید. diff --git a/2-ui/3-event-details/1-mouse-events-basics/head.html b/2-ui/3-event-details/1-mouse-events-basics/head.html index 1b9a73fca..2520244e0 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/head.html +++ b/2-ui/3-event-details/1-mouse-events-basics/head.html @@ -25,7 +25,7 @@ function logMouse(e) { let evt = e.type; while (evt.length < 11) evt += ' '; - showmesg(evt + " button=" + e.button, 'test') + showmesg(evt + " کلید=" + e.button, 'تست') return false; } From eb4714f2bb650b14f1068e9a99077489598e6727 Mon Sep 17 00:00:00 2001 From: Erfan Yeganegi Date: Sat, 11 Sep 2021 00:44:18 +0430 Subject: [PATCH 6/6] Update article.md --- .../1-mouse-events-basics/article.md | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 6efbc9a74..f7f7a90e3 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -56,27 +56,27 @@ مقادیر قابل قبول برای `event.button`: -| `event.button` | وضعیت کلید | -| -------------- | ----------------- | -| 0 | کلید چپ (اصلی) | -| 1 | کلید وسط (کمکی) | -| 2 | کلید راست (ثانوی) | -| 3 | کلید X1 (عقب) | -| 4 | کلید X2 (جلو) | +| `event.button` | وضعیت کلید | +|----------------|------------| +| 0 | کلید چپ (اصلی) | +| 1 | کلید وسط (کمکی) | +| 2 | کلید راست (ثانوی) | +| 3 | کلید X1 (عقب) | +| 4 | کلید X2 (جلو) | بیشتر موس‌ها فقط کلید چپ و راست را دارند، پس مقادیر احتمالی `0` و `2` هستند. دستگاه‌های لمسی نیز هنگامی که روی آنها ضربه زده شود رفتار مشابهی‌ را ایجاد می‌کنند. همچنین خصوصیت `event.buttons` همه کلیدهایی که هم اکنون فشرده شده‌اند را دارد، یک بیت به ازای هر کلید. در عمل این خصوصیت به ندرت استفاده می‌شود، در صورت نیاز، می‌توانید جزئیات بیشتری را [MDN](mdn:/api/MouseEvent/buttons) پیدا کنید. -```warn header="`event.which`منسوخ شده" کدهای قدیمی احتمالا از خاصیت`event.which` استفاده کرده‌اند که یک روش غیر استاندارد برای گرفتن کلید ها است. مقادیر احتمالی به صورت زیر است: +```warn header="`event.which` منسوخ شده" +کدهای قدیمی احتمالا از خاصیت `event.which` استفاده کرده‌اند که یک روش غیر استاندارد برای گرفتن کلید ها است. مقادیر احتمالی به صورت زیر است: - `event.which == 1` – کلید چپ, - `event.which == 2` – کلید وسط, - `event.which == 3` – کلید راست. به دلیل اینکه ‍`event.which` منسوخ شده، نباید از از آن استفاده کنیم. - -```` +``` ## اصلاح‌کننده‌ها: shift, alt, ctrl و meta @@ -105,9 +105,10 @@ } }; -```` +``` -```warn header="توجه: روی مک معمولا `Cmd`بجای`Ctrl`خواهد بود" روی ویندوز و لینوکس کلیدهای اصلاح‌کننده `key:Alt`, `key:Shift`و`key:Ctrl`وجود خواهد داشت. روی مک یک کلید دیگر نیز وجود دارد: `key:Cmd`, متناظر خاصیت `metaKey`. +```warn header="توجه: روی مک معمولا `Cmd`بجای`Ctrl`خواهد بود" +روی ویندوز و لینوکس کلیدهای اصلاح‌کننده `key:Alt`, `key:Shift`و`key:Ctrl`وجود خواهد داشت. روی مک یک کلید دیگر نیز وجود دارد: `key:Cmd`, متناظر خاصیت `metaKey`. در بیشتر اپلیکیشن‌ها هنگامی که در ونیدوز/لینوکس از `key:Ctrl` استفاده می‌شود، روی مک `key:Cmd` خواهد بود. @@ -115,19 +116,18 @@ پس اگر میخواهیم ترکیبی مانند `key:Ctrl`+کلیک را پشتیبانی کنیم، پس برای مک باید از `key:Cmd`+کلیک استفاده کنیم. این ترکیب برای کاربران مک راحت‌تر خواهد بود. -حتی اگر میخواستیم که کاربر مک را وادار کنیم که از `key:Ctrl`+کلیک استفاده کند، دشوار خواهد بود. مشکل این است که: یک چپ-کلیک با `key:Ctrl` همانند یک _right-click_ شناخته می‌شود، و رویداد `contextmenu` اتفاق می‌افتد، نه اینکه مانند ویندوز/لینوکس رویداد`click` اتفاق بیفتد. +حتی اگر میخواستیم که کاربر مک را وادار کنیم که از `key:Ctrl`+کلیک استفاده کند، دشوار خواهد بود. مشکل این است که: یک چپ-کلیک با `key:Ctrl` همانند یک *right-click* شناخته می‌شود، و رویداد `contextmenu` اتفاق می‌افتد، نه اینکه مانند ویندوز/لینوکس رویداد `click` اتفاق بیفتد. پس اگر می‌خواهیم که کاربران همه سیستم‌های عامل احساس راحتی داشته باشند، پس همراه `ctrlKey` باید `metaKey` را نیز چک کنیم. در کد جاوااسکریپت به این معنی است که میخواهیم ‍`if (event.ctrlKey || event.metaKey)` را چک کنیم. - -```` +``` ```warn header="همچنین دستگاه‌های موبایل نیز وجود دارند" ترکیب‌های کلید‌های کیبورد به عنوان یک قابلیت اضافه خوب هستند. اگر کاربر از کیبورد استفاده کند، کار می‌کنند. اما اگر دستگاه آنها کیبورد نداشته باشد، پس باید راهی برای زندگی کردن بدون از کلیدهای اصلاح‌کننده باشد. -```` +``` ## مختصات: clientX/Y, pageX/Y @@ -195,13 +195,12 @@ قاعدتا کاربر به سورس اچ‌تی‌ام‌ال صفحه دسترسی دارد، و می‌تواند هر اطلاعاتی که بخواهد از آنجا بردارد، اما هرکسی نمی‌داند چطور این‌ کار انجام می‌شود. ```` -## خلاصه: +## خلاصه رویداد‌های موس این خصوصیات‌را دارند: - کلید: `button`. - کلید‌های اصلاح‌کننده (`true` اگر فشار داده‌شوند): `altKey`, `ctrlKey`, `shiftKey` و `metaKey` (مک). - - اگر می‌خواهید که `key:Ctrl` را کنترل کنید، کاربران مک‌را فراموش نکنید،‌آنها معمولا از `key:Cmd` استفاده می‌کند. پس بهتر این است که `if (e.metaKey || e.ctrlKey)` چک شود. - مختصات مربوط به پنجره: `clientX/clientY`.