From 62879a445e2767cfda5068a4498d35a2e99fd878 Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Thu, 26 Oct 2023 23:07:50 +0300 Subject: [PATCH 01/10] 2-ui/99-ui-misc/02: 1st paragraph translated --- 2-ui/99-ui-misc/02-selection-range/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md index 819bcba29..d52890006 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -4,15 +4,15 @@ libs: --- -# Selection and Range +# Selection і Range -In this chapter we'll cover selection in the document, as well as selection in form fields, such as ``. +У цьому розділі ми розглянемо виділення у документі, або в полях форми, наприклад в ,``. -JavaScript can access an existing selection, select/deselect DOM nodes as a whole or partially, remove the selected content from the document, wrap it into a tag, and so on. +JavaScript може отримати доступ до наявного виділення тексту, вибирати/скасовувати виділення вузлів DOM повністю або частково, видаляти вибраний вміст із документа, або обгорнути його в тег тощо. -You can find some recipes for common tasks at the end of the chapter, in "Summary" section. Maybe that covers your current needs, but you'll get much more if you read the whole text. +В кінці розділу ми підготували кілька готових рішень для типових задач (розділ "Підсумки"). Цілком можливо, цього буде достатньо щоб задовольнити всі ваші поточні потреби, проте ви отримаєте набагато більше, якщо прочитаєте статтю повністю. -The underlying `Range` and `Selection` objects are easy to grasp, and then you'll need no recipes to make them do what you want. +З об’єктами `Range` та `Selection` досить легко можнарозібратись, і тоді вам не знадобляться готові рішення для розв'язання будь-якої задачі. ## Range From 7d0a189a29b596a6fb025a0f2310d970f406b332 Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Mon, 30 Oct 2023 16:15:22 +0200 Subject: [PATCH 02/10] 2-ui/99-ui-misc/02: Translation --- 2-ui/99-ui-misc/02-selection-range/article.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md index d52890006..29881863c 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -6,7 +6,7 @@ libs: # Selection і Range -У цьому розділі ми розглянемо виділення у документі, або в полях форми, наприклад в ,``. +У цьому розділі ми розглянемо виділення у документі та в полях форми, наприклад в ,``. JavaScript може отримати доступ до наявного виділення тексту, вибирати/скасовувати виділення вузлів DOM повністю або частково, видаляти вибраний вміст із документа, або обгорнути його в тег тощо. @@ -16,25 +16,25 @@ JavaScript може отримати доступ до наявного виді ## Range -The basic concept of selection is [Range](https://dom.spec.whatwg.org/#ranges), that is essentially a pair of "boundary points": range start and range end. +Основою виділення є [Range](https://dom.spec.whatwg.org/#ranges), який по своїй суті є парою "граничних точок": початком і кінцем діапазону. -A `Range` object is created without parameters: +Об'єкт `Range`(діапазон) створюється без параметрів: ```js let range = new Range(); ``` -Then we can set the selection boundaries using `range.setStart(node, offset)` and `range.setEnd(node, offset)`. +Далі ми можемо встановити межі виділення за допомогою `range.setStart(node, offset)` і `range.setEnd(node, offset)`. -As you might guess, further we'll use the `Range` objects for selection, but first let's create few such objects. +Як ви могли здогадатися, ми будемо використовувати об’єкти `Range` для виділення, але спочатку давайте створимо декілька таких об’єктів. -### Selecting the text partially +### Часткове виділення тексту -The interesting thing is that the first argument `node` in both methods can be either a text node or an element node, and the meaning of the second argument depends on that. +Цікаво те, що перший аргумент `node` в обох методах може бути або текстовим вузлом, або вузлом елементом, і від цього залежить значення другого аргументу. -**If `node` is a text node, then `offset` must be the position in its text.** +**Якщо `node` -- це текстовий вузол, то `offset` має бути позицією в його тексті.** -For example, given the element `

Hello

`, we can create the range containing the letters "ll" as follows: +Наприклад, в елементі `

Hello

`, ми можемо створити діапазон, що містить літери "ll" таким чином: ```html run

Hello

@@ -43,28 +43,28 @@ For example, given the element `

Hello

`, we can create the range containin range.setStart(p.firstChild, 2); range.setEnd(p.firstChild, 4); - // toString of a range returns its content as text + // toString діапазону повертає його вміст як текст console.log(range); // ll ``` -Here we take the first child of `

` (that's the text node) and specify the text positions inside it: +Тут ми беремо перший дочірній елемент всередині `

` (це текстовий вузол) і вказуємо позиції тексту для виділення: ![](range-hello-1.svg) -### Selecting element nodes +### Виділення вузлів елементів -**Alternatively, if `node` is an element node, then `offset` must be the child number.** +**Проте, якщо `node` є вузлом елементом, тоді `offset` має бути номером дочірнього елементу.** -That's handy for making ranges that contain nodes as a whole, not stop somewhere inside their text. +Це зручно для створення діапазонів, які містять вузли в цілому, а не зупиняються десь усередині їхнього тексту. -For example, we have a more complex document fragment: +Наприклад, маємо більш складний фрагмент документу: ```html autorun

Example: italic and bold

``` -Here's its DOM structure with both element and text nodes: +Ось його структура DOM з елементами та текстовими вузлами:
@@ -102,9 +102,9 @@ let selectPDomtree = { drawHtmlTree(selectPDomtree, 'div.select-p-domtree', 690, 320); -Let's make a range for `"Example: italic"`. +Зробимо діапазон для `"Example: italic"`. -As we can see, this phrase consists of exactly two children of `

`, with indexes `0` and `1`: +Як ми бачимо, ця фраза складається рівно з двох нащадків `

` з індексами `0` і `1`: ![](range-example-p-0-1.svg) From 9ae9a8108eecf7ae1127de5a75c35540efedc437 Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Sat, 4 Nov 2023 17:07:42 +0200 Subject: [PATCH 03/10] 01-hello-world: Improve translation with small tweaks --- 1-js/02-first-steps/01-hello-world/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 13c387d2c..986f5641d 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -9,7 +9,7 @@ ## Тег "script" -Програми JavaScript можна вставити у будь-яку частину HTML документа, використовуючи тег ` ``` -Ми повинні вибрати або зовнішній ``. +- Скрипт з окремого файла можна вставити за допомогою ``. Існує набагато більше інформації про браузерні скрипти та їхню взаємодію з веб-сторінкою. Але майте на увазі, що ця частина посібника присвячена мові JavaScript, тому ми не повинні відволікатись на деталі реалізації в браузері. Ми будемо використовувати браузер як спосіб запуску JavaScript, що є дуже зручним для читання в Інтернеті, але це лише один із багатьох можливих варіантів. From d76e71463c965ee1767443ae286a266fc9dd0761 Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Sat, 4 Nov 2023 17:33:54 +0200 Subject: [PATCH 04/10] 03-strict-mode: Improve translation --- 1-js/02-first-steps/02-structure/article.md | 6 +++--- 1-js/02-first-steps/03-strict-mode/article.md | 14 +++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 37a05a35d..e4c54c2e1 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -4,9 +4,9 @@ ## Інструкції -Інструкції – це синтаксичні конструкції та команди, які виконують дії. +Інструкції -- це синтаксичні конструкції та команди, які виконують якісь дії. -Ми вже бачили інструкцію `alert('Привіт, світ!')`, яка показує повідомлення "Привіт, світ!". +Ми вже бачили інструкцію `alert('Привіт, світ!')`, яка показує повідомлення 'Привіт, світ!'. Можна писати стільки інструкцій, скільки завгодно. Інструкції можна розділяти крапкою з комою. @@ -132,7 +132,7 @@ alert('Світ'); ``` ```smart header="Використовуйте комбінації клавіш!" -У більшості редакторів рядок коду можна закоментувати, натиснувши комбінацію клавіш `key:Ctrl+/`, а щоби закоментувати декілька рядків – виділіть потрібні рядки та натисніть комбінацію клавіш `key:Ctrl+Shift+/`. У macOS потрібно натискати клавішу `key:Cmd` замість `key:Ctrl` і клавішу `key:Option` замість `key:Shift`. +У більшості редакторів рядок коду можна закоментувати, натиснувши комбінацію клавіш `key:Ctrl+/`, а щоби закоментувати декілька рядків -- виділіть потрібні рядки та натисніть комбінацію клавіш `key:Ctrl+Shift+/`. У macOS потрібно натискати клавішу `key:Cmd` замість `key:Ctrl` і клавішу `key:Option` замість `key:Shift`. ``` ````warn header="Вкладені коментарі не підтримуються!" diff --git a/1-js/02-first-steps/03-strict-mode/article.md b/1-js/02-first-steps/03-strict-mode/article.md index f56df44d5..675212d63 100644 --- a/1-js/02-first-steps/03-strict-mode/article.md +++ b/1-js/02-first-steps/03-strict-mode/article.md @@ -41,12 +41,12 @@ alert("деякий код"); ```warn header="Неможливо скасувати `use strict`" Немає директиви на зразок `"no use strict"`, яка могла б вернути старий режим. -Як тільки ми увійшли в суворий режим, назад дороги немає. +Як тільки ми увімкнули суворий режим, назад дороги немає. ``` -## Консоль браузера +## Консоль розробника -Коли ви використовуєте [консоль розробника](info:devtools) для виконання коду, майте на увазі, що консоль усталено не використовує суворий режим. +Коли ви використовуєте [консоль розробника](info:devtools) для виконання коду, майте на увазі, що консоль типово не використовує суворий режим. В тих випадках, коли `use strict` впливає на роботу коду, ви отримаєте невірні результати в консолі. @@ -62,7 +62,7 @@ alert("деякий код"); Це працюватиме в більшості браузерів, зокрема в Firefox і Chrome. -Якщо не спрацює, наприклад, в старих браузерах, тоді найнадійнішим варіантом буде використати `use strict` всередині функції-обгортки (хоч це, звичайно, виглядатиме потворно). Ось так: +Якщо не спрацює, наприклад, в старих браузерах, тоді найнадійнішим варіантом буде використати `use strict` всередині функції-обгортки (хоч це, звичайно, виглядатиме дивно). Ось так: ```js (function() { @@ -78,12 +78,12 @@ alert("деякий код"); Одні можуть порекомендувати ставити `"use strict"` на початку скриптів... Але знаєте, що круто? -Сучасний JavaScript підтримує "класи" і "модулі" – просунуті структури мови (ми їх, звичайно, будемо вивчати), які автоматично вмикають `use strict`. Тому, якщо ми використовуємо ці структури, нам не потрібно прописувати директиву `"use strict"`. +Сучасний JavaScript підтримує "класи" і "модулі" -- просунуті конструкції мови (ми їх, звичайно, будемо вивчати), які автоматично вмикають `use strict`. Тому, якщо ми використовуємо їх, нам не потрібно прописувати директиву `"use strict"`. **Отож зараз бажано ставити `"use strict";` на початку скриптів. Але пізніше, коли наш код "доросте" до класів і модулів, ми зможемо пропускати цю директиву.** -Зараз ми знаємо про `use strict` в загальному. +Зараз ми дізнались основне про `use strict`. -У наступних розділах, в процесі вивчення особливостей мови, ми помітимо відмінності між суворим і усталеним режимами. На щастя, їх не багато, і вони справді роблять наше життя кращим. +У наступних розділах, в процесі вивчення особливостей мови, ми поговоримо про відмінності між суворим і типовим режимами. На щастя, їх не багато, але вони дійсно змінюють наше життя на краще. Всі приклади в цьому посібнику працюють в суворому режимі, окрім випадків (дуже рідкісних), коли вказано зворотнє. From f56edb5249a935d7fe6e8aae247446197258a900 Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Wed, 3 Jan 2024 13:17:56 +0200 Subject: [PATCH 05/10] 2-ui/99-ui-misc/02: Translation Part 2 --- 2-ui/99-ui-misc/02-selection-range/article.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md index 29881863c..4b25e7c30 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -6,13 +6,13 @@ libs: # Selection і Range -У цьому розділі ми розглянемо виділення у документі та в полях форми, наприклад в ,``. +У цьому розділі ми розглянемо виділення у документі та в полях форми, наприклад, в ``. JavaScript може отримати доступ до наявного виділення тексту, вибирати/скасовувати виділення вузлів DOM повністю або частково, видаляти вибраний вміст із документа, або обгорнути його в тег тощо. В кінці розділу ми підготували кілька готових рішень для типових задач (розділ "Підсумки"). Цілком можливо, цього буде достатньо щоб задовольнити всі ваші поточні потреби, проте ви отримаєте набагато більше, якщо прочитаєте статтю повністю. -З об’єктами `Range` та `Selection` досить легко можнарозібратись, і тоді вам не знадобляться готові рішення для розв'язання будь-якої задачі. +З об’єктами `Range` та `Selection` можна розібратись досить легко, і тоді вам не знадобляться готові рішення для розв'язання задач. ## Range @@ -108,14 +108,14 @@ drawHtmlTree(selectPDomtree, 'div.select-p-domtree', 690, 320); ![](range-example-p-0-1.svg) -- The starting point has `

` as the parent `node`, and `0` as the offset. +- Початкова точка має `

` як батьківський `node` і `0` як `offset`. - So we can set it as `range.setStart(p, 0)`. -- The ending point also has `

` as the parent `node`, but `2` as the offset (it specifies the range up to, but not including `offset`). + Тому ми можемо встановити його як `range.setStart(p, 0)`. +- Кінцева точка також має `

` як батьківський `node`, але `2` як `offset` (вона вказує діапазон до, але не включаючи `offset`). - So we can set it as `range.setEnd(p, 2)`. + Тому ми можемо встановити його як `range.setEnd(p, 2)`. -Here's the demo. If you run it, you can see that the text gets selected: +Ось демо. Якщо ви запустите його, ви побачите, що текст буде виділено: ```html run

Example: italic and bold

@@ -128,15 +128,15 @@ Here's the demo. If you run it, you can see that the text gets selected: range.setEnd(p, 2); */!* - // toString of a range returns its content as text, without tags + // toString діапазону повертає його вміст у вигляді тексту без тегів console.log(range); // Example: italic - // apply this range for document selection (explained later below) + // застосуємо цей діапазон для виділення в document (пояснюється нижче) document.getSelection().addRange(range); ``` -Here's a more flexible test stand where you can set range start/end numbers and explore other variants: +Ось гнучкіший тестовий приклад, де ви можете встановити початкові/кінцеві номери діапазону та дослідити інші варіанти: ```html run autorun

Example: italic and bold

@@ -152,32 +152,32 @@ From – To ` first child (taking all but two first letters of "Example: ") -- ends at the position 3 in `` first child (taking first three letters of "bold", but no more): +Нам потрібно створити діапазон, який: +- починається з позиції 2 у першому дочірньому вузлі елемента `

` (беручи всі, крім двох перших літер "Example: ") +- закінчується на позиції 3 у `` в першому дочірньому вузлі (бере перші три літери "bold", але не більше): ```html run

Example: italic and bold

@@ -190,14 +190,14 @@ We need to create a range, that: console.log(range); // ample: italic and bol - // use this range for selection (explained later) + // застосуємо цей діапазон для виділення в document (пояснюється нижче) window.getSelection().addRange(range); ``` -As you can see, it's fairly easy to make a range of whatever we want. +Як бачите, досить легко створити діапазон для будь-чого. -If we'd like to take nodes as a whole, we can pass elements in `setStart/setEnd`. Otherwise, we can work on the text level. +Ба більше, якщо ми хочемо взяти вузли як ціле, треба передати елементи замість текстових вузлів в `setStart/setEnd`. Інакше це буде працювати на рівні тексту. ## Range properties From e01af6b7156a20b1deddfd2632ef65c48d678690 Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Sun, 14 Jan 2024 19:12:21 +0200 Subject: [PATCH 06/10] 2-ui/99-ui-misc/02: Translation Part 3 --- 2-ui/99-ui-misc/02-selection-range/article.md | 117 +++++++++--------- 1 file changed, 59 insertions(+), 58 deletions(-) diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md index 4b25e7c30..ef6d78c90 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -199,66 +199,66 @@ From – To Example: italic and bold

@@ -266,7 +266,7 @@ Click buttons to run methods on the selection, "resetExample" to reset it. ``` -There also exist methods to compare ranges, but these are rarely used. When you need them, please refer to the [spec](https://dom.spec.whatwg.org/#interface-range) or [MDN manual](mdn:/api/Range). +Існують також методи порівняння діапазонів, але вони використовуються рідко. Коли вони вам знадобляться, ви можете з ними познайомитись ось тут [spec](https://dom.spec.whatwg.org/#interface-range), або тут [MDN manual](mdn:/api/Range). ## Selection -`Range` is a generic object for managing selection ranges. Although, creating a `Range` doesn't mean that we see a selection on screen. +`Range` -- це загальний об'єкт для керування діапазонами виділення. Хоча створення `Range` не означає, що ми бачимо виділення на екрані. -We may create `Range` objects, pass them around -- they do not visually select anything on their own. +Ми можемо створювати об’єкти `Range`, передавати їх -- вони самі по собі нічого візуально не виділяють. -The document selection is represented by `Selection` object, that can be obtained as `window.getSelection()` or `document.getSelection()`. A selection may include zero or more ranges. At least, the [Selection API specification](https://www.w3.org/TR/selection-api/) says so. In practice though, only Firefox allows to select multiple ranges in the document by using `key:Ctrl+click` (`key:Cmd+click` for Mac). +Вибраний документ представлений об’єктом `Selection`, який можна отримати як `window.getSelection()` або `document.getSelection()`. Виділення може містити нуль або більше діапазонів. Принаймні, [Selection API specification](https://www.w3.org/TR/selection-api/) каже саме так. Однак на практиці лише Firefox дозволяє вибирати кілька діапазонів у документі за допомогою `key:Ctrl+click` (`key:Cmd+click` для Mac). -Here's a screenshot of a selection with 3 ranges, made in Firefox: +Ось скріншот вибору з 3 діапазонами, зроблений у Firefox: ![](selection-firefox.svg) -Other browsers support at maximum 1 range. As we'll see, some of `Selection` methods imply that there may be many ranges, but again, in all browsers except Firefox, there's at maximum 1. +Інші браузери підтримують максимум 1 діапазон. Як ми побачимо, деякі з методів `Selection` означають, що може бути багато діапазонів, але знову ж таки, у всіх браузерах, крім Firefox, їх не більше 1. -Here's a small demo that shows the current selection (select something and click) as text: +Ось невеликий приклад, який показує поточний вибір (виберіть щось і натисніть) у вигляді тексту: -## Selection properties +## Властивості Selection -As said, a selection may in theory contain multiple ranges. We can get these range objects using the method: +Як було сказано, об'єкт `Selection` теоретично може містити кілька діапазонів. Ми можемо отримати ці діапазони за допомогою методу: -- `getRangeAt(i)` -- get i-th range, starting from `0`. In all browsers except Firefox, only `0` is used. +- `getRangeAt(i)` -- отримати i-й діапазон, починаючи з `0`. У всіх браузерах, крім Firefox, використовується лише `0`. + +Крім того, існують зручніші властивості. -Also, there exist properties that often provide better convenience. +Подібно до діапазону, об’єкт виділення має початок, який називається "anchor", і кінець, який називається "focus". -Similar to a range, a selection object has a start, called "anchor", and the end, called "focus". +Основними властивостями `Selection` є: -The main selection properties are: +- `anchorNode` -- вузол, де починається виділення, +- `anchorOffset` -- зміщення в `anchorNode`, де починається виділення, +- `focusNode` -- вузол, де закінчується виділення, +- `focusOffset` -- зсув у `focusNode`, де закінчується виділення, -- `anchorNode` -- the node where the selection starts, -- `anchorOffset` -- the offset in `anchorNode` where the selection starts, -- `focusNode` -- the node where the selection ends, -- `focusOffset` -- the offset in `focusNode` where the selection ends, -- `isCollapsed` -- `true` if selection selects nothing (empty range), or doesn't exist. -- `rangeCount` -- count of ranges in the selection, maximum `1` in all browsers except Firefox. +- `isCollapsed` -- `true` якщо нічого не виділено (порожній діапазон) або не існує. +- `rangeCount` -- кількість діапазонів у виділенні, максимум `1` у всіх браузерах, крім Firefox. ```smart header="Selection end/start vs Range" From 19cf4a1ad2e427e5daf6311722e71e02737101a6 Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Mon, 15 Jan 2024 19:06:18 +0200 Subject: [PATCH 07/10] 2-ui/99-ui-misc/02: Translation Part 4 --- 2-ui/99-ui-misc/02-selection-range/article.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md index ef6d78c90..803382740 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -353,39 +353,39 @@ From – To Select me: italic and bold

@@ -397,7 +397,7 @@ From – To let {anchorNode, anchorOffset, focusNode, focusOffset} = selection; - // anchorNode and focusNode are text nodes usually + // anchorNode і focusNode зазвичай є текстовими вузлами from.value = `${anchorNode?.data}, offset ${anchorOffset}`; to.value = `${focusNode?.data}, offset ${focusOffset}`; }; From 16d781cead60d9178d4ba6b105cd2a2389ddd63b Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Thu, 1 Feb 2024 11:45:33 +0200 Subject: [PATCH 08/10] 2-ui/99-ui-misc/02: Translation Part 5 --- 2-ui/99-ui-misc/02-selection-range/article.md | 82 +++++++++---------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md index 803382740..f976ae297 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -404,14 +404,14 @@ From – To ``` -### Selection copying demo +### Виділення з копіюванням -There are two approaches to copying the selected content: +Є два підходи до копіювання виділенного вмісту: -1. We can use `document.getSelection().toString()` to get it as text. -2. Otherwise, to copy the full DOM, e.g. if we need to keep formatting, we can get the underlying ranges with `getRangeAt(...)`. A `Range` object, in turn, has `cloneContents()` method that clones its content and returns as `DocumentFragment` object, that we can insert elsewhere. +1. Ми можемо використати `document.getSelection().toString()`, щоб отримати його як текст. +2. В іншому випадку, щоб скопіювати повний DOM, напр. якщо нам потрібно продовжити форматування, ми можемо отримати виділенні діапазони за допомогою `getRangeAt(...)`. Об’єкт `Range`, у свою чергу, має метод `cloneContents()`, який клонує його вміст і повертає як об’єкт `DocumentFragment`, який ми можемо вставити в інше місце. -Here's the demo of copying the selected content both as text and as DOM nodes: +Ось приклад копіювання вибраного вмісту як тексту і як вузлів DOM: ```html run height=100

Select me: italic and bold

@@ -426,83 +426,83 @@ As text: cloned.innerHTML = astext.innerHTML = ""; - // Clone DOM nodes from ranges (we support multiselect here) + // Клонувати вузли DOM із діапазонів (тут ми підтримуємо множинне виділення) for (let i = 0; i < selection.rangeCount; i++) { cloned.append(selection.getRangeAt(i).cloneContents()); } - // Get as text + // Отримати як текст astext.innerHTML += selection; }; ``` -## Selection methods +## Методи Selection -We can work with the selection by adding/removing ranges: +Ми можемо працювати з виділенням, додаючи/вилучаючи діапазони: -- `getRangeAt(i)` -- get i-th range, starting from `0`. In all browsers except Firefox, only `0` is used. -- `addRange(range)` -- add `range` to selection. All browsers except Firefox ignore the call, if the selection already has an associated range. -- `removeRange(range)` -- remove `range` from the selection. -- `removeAllRanges()` -- remove all ranges. -- `empty()` -- alias to `removeAllRanges`. +- `getRangeAt(i)` -- отримати i-й діапазон, починаючи з `0`. У всіх браузерах, крім Firefox, використовується лише `0`. +- `addRange(range)` -- додати `range` до виділення. Усі браузери, крім Firefox, ігнорують виклик, якщо у виділенні вже є діапазон. +- `removeRange(range)` -- видалити `range` з виділення. +- `removeAllRanges()` -- видалити всі діапазони. +- `empty()` -- метод аналогічний `removeAllRanges`. -There are also convenience methods to manipulate the selection range directly, without intermediate `Range` calls: +Існують також зручні методи для безпосереднього керування діапазоном вибору без проміжних викликів `Range`: -- `collapse(node, offset)` -- replace selected range with a new one that starts and ends at the given `node`, at position `offset`. -- `setPosition(node, offset)` -- alias to `collapse`. -- `collapseToStart()` - collapse (replace with an empty range) to selection start, -- `collapseToEnd()` - collapse to selection end, -- `extend(node, offset)` - move focus of the selection to the given `node`, position `offset`, -- `setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)` - replace selection range with the given start `anchorNode/anchorOffset` and end `focusNode/focusOffset`. All content in-between them is selected. -- `selectAllChildren(node)` -- select all children of the `node`. -- `deleteFromDocument()` -- remove selected content from the document. -- `containsNode(node, allowPartialContainment = false)` -- checks whether the selection contains `node` (partially if the second argument is `true`) +- `collapse(node, offset)` -- замінити вибраний діапазон на новий, який починається і закінчується на заданому `node`, на позиції `offset`. +- `setPosition(node, offset)` -- метод аналогічний `collapse`. +- `collapseToStart()` -- згорнути (замінити порожнім діапазоном) до початку виділення, +- `collapseToEnd()` -- згорнути до кінця виділення, +- `extend(node, offset)` -- перемістити фокус виділення на заданий `node`, положення `offset`, +- `setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)` -- замінити діапазон виділення заданим початковим `anchorNode/anchorOffset` і кінцевим `focusNode/focusOffset`. Весь вміст між ними виділено. +- `selectAllChildren(node)` -- вибрати всі дочірні елементи `node`. +- `deleteFromDocument()` -- видалити виділений вміст із документа. +- `containsNode(node, allowPartialContainment = false)` -- перевіряє, чи містить виділення заданий `node` (або частково, якщо другий аргумент `true`) -For most tasks these methods are just fine, there's no need to access the underlying `Range` object. +Для більшості завдань ці методи чудово підходять, немає необхідності звертатися до базового об’єкта `Range`. -For example, selecting the whole contents of the paragraph `

`: +Наприклад, виділення всього вмісту абзацу `

`: ```html run

Select me: italic and bold

``` -The same thing using ranges: +Те саме з використанням діапазонів: ```html run

Select me: italic and bold

``` -```smart header="To select something, remove the existing selection first" -If a document selection already exists, empty it first with `removeAllRanges()`. And then add ranges. Otherwise, all browsers except Firefox ignore new ranges. +```smart header="Щоб зробити нове виділення, спочатку приберіть поточне" +Якщо вже щось виділене, спочатку приберіть це за допомогою `removeAllRanges()`. А потім додавайте діапазони. В іншому випадку всі браузери, крім Firefox, ігнорують нові діапазони. -The exception is some selection methods, that replace the existing selection, such as `setBaseAndExtent`. +Виняток становлять деякі методи, які замінюють існуюче виділення, наприклад `setBaseAndExtent`. ``` -## Selection in form controls +## Виділення в інтерактивних елементах форми -Form elements, such as `input` and `textarea` provide [special API for selection](https://html.spec.whatwg.org/#textFieldSelection), without `Selection` or `Range` objects. As an input value is a pure text, not HTML, there's no need for such objects, everything's much simpler. +Такі елементи форми, як `input` і `textarea`, надають [спеціальний API для виділення](https://html.spec.whatwg.org/#textFieldSelection) без об’єктів `Selection` або `Range`. Ба більше, оскільки на вході завжди чистий текст, а не HTML, такі об’єкти просто не потрібні, все працює значно простіше. -Properties: -- `input.selectionStart` -- position of selection start (writeable), -- `input.selectionEnd` -- position of selection end (writeable), -- `input.selectionDirection` -- selection direction, one of: "forward", "backward" or "none" (if e.g. selected with a double mouse click), +Властивості: +- `input.selectionStart` -- позиція початку виділення (працює на запис), +- `input.selectionEnd` -- позиція кінця виділення (працює на запис), +- `input.selectionDirection` -- напрямок виділення, одне з: "forward", "backward" або "none" (якщо напр. виділено подвійним клацанням миші), -Events: -- `input.onselect` -- triggers when something is selected. +Події: +- `input.onselect` -- запускається, коли щось виділено. Methods: From 1c97fe021e062ebebe9735f1e71bd39ac381d90c Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Tue, 13 Feb 2024 20:25:48 +0200 Subject: [PATCH 09/10] 2-ui/99-ui-misc/02: Translation Part 6 --- 2-ui/99-ui-misc/02-selection-range/article.md | 120 +++++++++--------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md index f976ae297..763092654 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -504,26 +504,26 @@ As text: Події: - `input.onselect` -- запускається, коли щось виділено. -Methods: +Методи: -- `input.select()` -- selects everything in the text control (can be `textarea` instead of `input`), -- `input.setSelectionRange(start, end, [direction])` -- change the selection to span from position `start` till `end`, in the given direction (optional). -- `input.setRangeText(replacement, [start], [end], [selectionMode])` -- replace a range of text with the new text. +- `input.select()` -- виділяє все в текстовому елементі (може бути `textarea` замість `input`), +- `input.setSelectionRange(start, end, [direction])` -- змінити виділення на діапазон від позиції `start` до `end` у вказаному `direction` (необов’язковий параметер). +- `input.setRangeText(replacement, [start], [end], [selectionMode])` -- замінити діапазон тексту новим текстом. - Optional arguments `start` and `end`, if provided, set the range start and end, otherwise user selection is used. + Необов’язкові аргументи `start` і `end`, якщо вони надані, встановлюють початок і кінець діапазону, інакше використовується виділення від користувача. - The last argument, `selectionMode`, determines how the selection will be set after the text has been replaced. The possible values are: + Останній аргумент, `selectionMode`, визначає, як буде встановлено виділення після заміни тексту. Можливі значення: - - `"select"` -- the newly inserted text will be selected. - - `"start"` -- the selection range collapses just before the inserted text (the cursor will be immediately before it). - - `"end"` -- the selection range collapses just after the inserted text (the cursor will be right after it). - - `"preserve"` -- attempts to preserve the selection. This is the default. + - `"select"` -- буде виділено щойно вставлений текст. + - `"start"` -- діапазон виділення згортається безпосередньо перед вставленим текстом (курсор буде перед ним). + - `"end"` -- діапазон виділення згортається відразу після вставленого тексту (курсор буде відразу за ним). + - `"preserve"` -- спробує зберегти виділення. Це типове значення. -Now let's see these methods in action. +Тепер давайте подивимося на ці методи в дії. -### Example: tracking selection +### Приклад: відстеження виділення -For example, this code uses `onselect` event to track selection: +Наприклад, цей код використовує подію `onselect` для відстеження виділення: ```html run autorun