From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../timing_element_visibility/index.html | 36 +++++++++++----------- 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'files/ru/web/api/intersection_observer_api') 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 8c3ac3595c..c4cab59903 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 @@ -25,7 +25,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility

Структура Web-приложений не очень сложна. Мы будем использовать CSS Grid для стилизации и макетирования, так что всё достаточно очевидно:

-
<div class="wrapper">
+
<div class="wrapper">
   <header>
     <h1>A Fake Blog</h1>
     <h2>Showing Intersection Observer in action!</h2>
@@ -55,7 +55,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 
Мы создаём стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.

 
-
body {
+
body {
   font-family: "Open Sans", "Arial", "Helvetica", sans-serif;
   background-color: aliceblue;
 }
@@ -83,7 +83,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 
Заголовок достаточно прост, так как в нашем примере он содержит небольшой текст.

 
-
header {
+
header {
   grid-column: 1 / -1;
   grid-row: 1;
   background-color: aliceblue;
@@ -95,7 +95,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 
Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создаётся с помощью элемента {{HTMLElement("aside")}}.

 
-
aside {
+
aside {
   grid-column: 1;
   grid-row: 2;
   background-color: cornsilk;
@@ -120,7 +120,7 @@ aside ul li a {
 
 
Контент будет содержаться в элементе {{HTMLElement("main")}}.

 
-
main {
+
main {
   grid-column: 2;
   grid-row: 2;
   margin: 0;
@@ -134,7 +134,7 @@ aside ul li a {
 
 
Каждая статья состоит из элемента {{HTMLElement("article")}}:

 
-
article {
+
article {
   background-color: white;
   padding: 6px;
 }
@@ -153,7 +153,7 @@ article h2 {
 
 
Наконец, рекламные блоки. Нужно заметить, что каждый отдельный рекламный блок может изменять свои стили динамически (мы увидим это позже):

 
-
.ad {
+
.ad {
   height: 96px;
   padding: 6px;
   border-color: #555;
@@ -187,7 +187,7 @@ article h2 {
 
 
Перейдём к JavaScript-коду, который всё оживит. Начнём с глобальных переменных:

 
-
let contentBox;
+
let contentBox;
 
 let nextArticleID = 1;
 let visibleAds = new Set();
@@ -217,7 +217,7 @@ let refreshIntervalID = 0;

 
 
Для первичного запуска приложения мы вызовем функцию startup():

 
-
window.addEventListener("load", startup, false);
+
window.addEventListener("load", startup, false);
 
 function startup() {
   contentBox = document.querySelector("main");
@@ -253,7 +253,7 @@ function startup() {
 
 
Давайте рассмотрим обработчик события {{event("visibilitychange")}}. Это событие срабатывает, когда документ становится видим или невидим. Как правило, это случается, когда пользователь переключается между табами. Так как Intersection Observer отслеживает только перекрытия элемента с корневым элементом, нам необходимо отдельно позаботиться о детекции видимости документа. Для этого мы используем Page Visibility API.

 
-
function handleVisibilityChange() {
+
function handleVisibilityChange() {
   if (document.hidden) {
     if (!previouslyVisibleAds) {
       previouslyVisibleAds = visibleAds;
@@ -282,7 +282,7 @@ function startup() {
 
 
При каждой итерации в браузерном event loop, каждый наблюдатель  {{domxref("IntersectionObserver")}} проверяет, не прошёл ли какой-либо из элементов-целей через пороговые значения наблюдателя.  Для каждого наблюдателя список таких целей собирается в один список и отправляется в колбэк-функцию наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении intersectionCallback() выглядит так:

 
-
function intersectionCallback(entries) {
+
function intersectionCallback(entries) {
   entries.forEach(function(entry) {
     let adBox = entry.target;
 
@@ -308,7 +308,7 @@ function startup() {
 
 
Каждую секунду у нас срабатывает интервал handleRefreshInterval(), который мы задали в функции startup(). Главная задача этого интервала - обновлять таймеры каждую секунду и перерисовывать значение таймеров.

 
-
function handleRefreshInterval() {
+
function handleRefreshInterval() {
   let redrawList = [];
 
   visibleAds.forEach(function(adBox) {
@@ -339,7 +339,7 @@ function startup() {
 
 
Ранее мы уже видели, что если нам нужно обновить общее время видимости рекламы - мы вызываем функцию updateAdTimer(). Эта функция принимает в качестве аргумента объект {{domxref("HTMLDivElement")}}.

 
-
function updateAdTimer(adBox) {
+
function updateAdTimer(adBox) {
   let lastStarted = adBox.dataset.lastViewStarted;
   let currentTime = performance.now();
 
@@ -373,7 +373,7 @@ function startup() {
 
 
Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаём в функцию drawAdTimer контейнер:

 
-
function drawAdTimer(adBox) {
+
function drawAdTimer(adBox) {
   let timerBox = adBox.querySelector(".timer");
   let totalSeconds = adBox.dataset.totalViewTime / 1000;
   let sec = Math.floor(totalSeconds % 60);
@@ -390,7 +390,7 @@ function startup() {
 
 
Функция buildContents() вызывается при старте приложения. Она формирует тело статьи и добавляет рекламные блоки:

 
-
let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" +
+
let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" +
   " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" +
   " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" +
   " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" +
@@ -419,7 +419,7 @@ function buildContents() {
 
 
Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию createArticle(), которая в качестве входных данных принимает строку-текст статьи.

 
-
function createArticle(contents) {
+
function createArticle(contents) {
   let articleElem = document.createElement("article");
   articleElem.id = nextArticleID;
 
@@ -440,7 +440,7 @@ function buildContents() {
 
 
Функция loadRandomAd() имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для replaceBox, создаётся и применяется новый контейнер для рекламы. Если вы указали replaceBox, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.

 
-
function loadRandomAd(replaceBox) {
+
function loadRandomAd(replaceBox) {
   let ads = [
     {
       bgcolor: "#cec",
@@ -537,7 +537,7 @@ function buildContents() {
 
 
Наша {{anch("Handling intersection changes", "функция обработки перекрытия")}} отслеживает рекламные блоки. Когда они становятся на 100% и общее время их видимости достаточное для того, рекламный блок заменяется на новый. Когда это происходит, вызывается функция replaceAd().

 
-
function replaceAd(adBox) {
+
function replaceAd(adBox) {
   let visibleTime;
 
   updateAdTimer(adBox);
-- 
cgit v1.2.3-54-g00ecf