From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- .../timing_element_visibility/index.html | 26 +++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'files/ru/web/api/intersection_observer_api/timing_element_visibility') diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html index b4fb095993..b7f1bf0997 100644 --- a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -53,7 +53,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility

Основа

-

Мы создаем стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.

+

Мы создаём стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.

body {
   font-family: "Open Sans", "Arial", "Helvetica", sans-serif;
@@ -93,7 +93,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 
Боковая панель

 
-
Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создается с помощью элемента {{HTMLElement("aside")}}.

+
Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создаётся с помощью элемента {{HTMLElement("aside")}}.

 
 
aside {
   grid-column: 1;
@@ -185,7 +185,7 @@ article h2 {
 
 
Совмещаем с JavaScript

 
-
Перейдём к JavaScript коду, который всё оживит. Начнем с глобальных переменных:

+
Перейдём к JavaScript коду, который всё оживит. Начнём с глобальных переменных:

 
 
let contentBox;
 
@@ -243,7 +243,7 @@ function startup() {
 
 
Параметр "порог" (threshold) содержит массив со значениями 0.0 и 0.75; Это заставит обработчик вызываться каждый раз, когда целевой элемент становится полностью обёрнут или только начинает выходить из зоны перекрытия (коэффициент перекрытия 0.0) или проходит порог в 75% видимости в обоих направлениях (коэффициент перекрытия 0.75).

 
-
Наблюдатель adObserver создается с помощью конструктора IntersectionObserver. В аргументы конструктора мы передаём колбэк-функцию (intersectionCallback) и ранее определенный объект параметров.

+
Наблюдатель adObserver создаётся с помощью конструктора IntersectionObserver. В аргументы конструктора мы передаём колбэк-функцию (intersectionCallback) и ранее определённый объект параметров.

 
 
После этого мы вызываем функцию buildContents(). Её мы напишем чуть позже. Функция генерирует и вставляет в контейнер статьи и рекламные блоки.

 
@@ -280,7 +280,7 @@ function startup() {
 
 
Обработчик изменений наложения

 
-
При каждой итерации в браузерном event loop, каждый наблюдатель  {{domxref("IntersectionObserver")}} проверяет, не прошел ли какой-либо из элементов-целей через пороговые значения наблюдателя.  Для каждого наблюдателя список таких целей собирается в один список и отправляется в колбэк-функцию наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении intersectionCallback() выглядит так:

+
При каждой итерации в браузерном event loop, каждый наблюдатель  {{domxref("IntersectionObserver")}} проверяет, не прошёл ли какой-либо из элементов-целей через пороговые значения наблюдателя.  Для каждого наблюдателя список таких целей собирается в один список и отправляется в колбэк-функцию наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении intersectionCallback() выглядит так:

 
 
function intersectionCallback(entries) {
   entries.forEach(function(entry) {
@@ -361,7 +361,7 @@ function startup() {
  
Общее время видимости рекламного блока.

 
 
-
Значение этих атрибутов можно получить с помощью {{domxref("HTMLElement.dataset")}}. Значения - строки, но вы можете конвертировать их в числа. Фактически, JavaScript делает это автоматически, но нам всё равно придется в одном месте сделать это вручную.

+
Значение этих атрибутов можно получить с помощью {{domxref("HTMLElement.dataset")}}. Значения - строки, но вы можете конвертировать их в числа. Фактически, JavaScript делает это автоматически, но нам всё равно придётся в одном месте сделать это вручную.

 
 
Функция начинается с выяснения времени, когда происходила последняя проверка видимости рекламы (adBox.dataset.lastViewStarted). Мы также получаем текущее время с момента создания документа с помощью {{domxref("Performance.now", "performance.now()")}} currentTime.

 
@@ -371,7 +371,7 @@ function startup() {
 
 
Показываем таймер рекламы

 
-
Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаем в функцию drawAdTimer контейнер:

+
Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаём в функцию drawAdTimer контейнер:

 
 
function drawAdTimer(adBox) {
   let timerBox = adBox.querySelector(".timer");
@@ -411,11 +411,11 @@ function buildContents() {
 
 
Переменная loremIpsum содержит текст, который мы используем как тело статьи. Разумеется, в реальном мире вы будете забирать статьи из какой-то базы данных. Но это тема другой статьи, поэтому мы пошли простым путём.

 
-
buildContents() создаёт страницу с пятью статьями. Каждая нечётная статья содержит рекламные блоки.  Статьи будут вставлены в блок контента {{HTMLElement("main")}}. после того, как будет вызван метод createArticle(), который мы разберем позже.

+
buildContents() создаёт страницу с пятью статьями. Каждая нечётная статья содержит рекламные блоки.  Статьи будут вставлены в блок контента {{HTMLElement("main")}}. после того, как будет вызван метод createArticle(), который мы разберём позже.

 
-
Рекламные блоки создаются с помощью функции loadRandomAd(). Эта функция создает и вставляет блоки одновременно. Как мы увидим позже, эта же функция может и заменить уже существующую рекламу. Но пока что просто добавим рекламу в существующий текст.

+
Рекламные блоки создаются с помощью функции loadRandomAd(). Эта функция создаёт и вставляет блоки одновременно. Как мы увидим позже, эта же функция может и заменить уже существующую рекламу. Но пока что просто добавим рекламу в существующий текст.

 
-
Создаем статью

+
Создаём статью

 
 
Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию createArticle(), которая в качестве входных данных принимает строку-текст статьи.

 
@@ -434,11 +434,11 @@ function buildContents() {
   return articleElem;
 }

 
-
Сперва, элемент <article> создаётся и ему присваивается уникальный ID nextArticleID (это просто счётчик от нуля до бесконечности). Затем мы создаем и добавляем элемент {{HTMLElement("h2")}} для заголовка и применяем HTML из переменной contents. Наконец, мы увеличиваем значение nextArticleID (таким образом, следующий элемент получит уникальный ID) и возвращаем элемент статьи обратно.

+
Сперва, элемент <article> создаётся и ему присваивается уникальный ID nextArticleID (это просто счётчик от нуля до бесконечности). Затем мы создаём и добавляем элемент {{HTMLElement("h2")}} для заголовка и применяем HTML из переменной contents. Наконец, мы увеличиваем значение nextArticleID (таким образом, следующий элемент получит уникальный ID) и возвращаем элемент статьи обратно.

 
 
Создание рекламного блока

 
-
Функция loadRandomAd() имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для replaceBox, создается и применяется новый контейнер для рекламы. Если вы указали replaceBox, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.

+
Функция loadRandomAd() имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для replaceBox, создаётся и применяется новый контейнер для рекламы. Если вы указали replaceBox, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.

 
 
function loadRandomAd(replaceBox) {
   let ads = [
@@ -523,7 +523,7 @@ function buildContents() {
 
 
Если replaceBox содержит какое-то значение, мы рассматриваем его как элемент рекламного блока. Мы завершаем наблюдение за элементом с помощью {{domxref("IntersectionObserver.unobserve()")}}. Затем собираем в локальные переменные данные из каждого свойства элемента: заголовок, тело и таймер.

 
-
Если никакое значение не указано для replaceBox, мы создаем новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса "ad". Затем создаются заголовок рекламного блока, его текст и таймер.  Соотстветвенно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру adBox.

+
Если никакое значение не указано для replaceBox, мы создаём новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса "ad". Затем создаются заголовок рекламного блока, его текст и таймер.  Соотстветвенно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру adBox.

 
 
После этого разветвления наш код вновь возвращается к единому. Фоновый цвет рекламных блоков присваивается соответственно записям. Элементам присваиваются классы и содержимое.

 
-- 
cgit v1.2.3-54-g00ecf