From 19ca0dc445bb3737c77cd3b2aee25e89426c1384 Mon Sep 17 00:00:00 2001
From: Vitya <9317613+vitya-ne@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:30:58 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=B7=D0=B0=D0=BA=D1=80=D1=8B=D1=82=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BF=D0=BE=20`Esc`=20=D0=B2=20=D1=80=D0=B5=D1=86?=
 =?UTF-8?q?=D0=B5=D0=BF=D1=82=D0=B5=20"=D0=9F=D0=BE=D0=BF=D0=B0=D0=BF"=20(?=
 =?UTF-8?q?#5477)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Добавлет обработку закрытия по ESC

Заменяет вызовы при закрытии

* Корректирует код демо согласно описания

Объединяет идентичные стили

* Исправляет запись RGB-цвета, добавляет ссылку

* Добавляет название события

---------

Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>
Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com>
---
 recipes/popup/demos/popup-demo/index.html | 22 +++++++++-------------
 recipes/popup/index.md                    | 23 ++++++++++++++---------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/recipes/popup/demos/popup-demo/index.html b/recipes/popup/demos/popup-demo/index.html
index 931b671685..fdf16601b5 100644
--- a/recipes/popup/demos/popup-demo/index.html
+++ b/recipes/popup/demos/popup-demo/index.html
@@ -110,7 +110,9 @@
       transition: background-color 0.2s linear;
     }
 
-    .closeDialogBtn:hover {
+    .closeDialogBtn:hover,
+    .closeDialogBtn:focus,
+    .closeDialogBtn:focus-visible {
       border: 2px solid #000000;
     }
 
@@ -119,19 +121,11 @@
       outline: none;
     }
 
-    .closeDialogBtn:focus-visible {
-      border: 2px solid #000000;
-    }
-
     .button:focus {
       border: 2px solid #FFFFFF;
       outline: none;
     }
 
-    .closeDialogBtn:focus {
-      border: 2px solid #000000;
-    }
-
     .button-violet {
       background-color: #C56FFF;
     }
@@ -141,7 +135,7 @@
     }
 
     dialog::backdrop {
-      background-color: rgba(0, 0, 0, 0.8);
+      background-color: rgb(0 0 0 / 0.8);
     }
 
     .scroll-lock {
@@ -190,14 +184,13 @@ <h2>Дока — самая добрая документация &#128579</h2>
   <script>
     const dialog = document.getElementById('myDialog')
     const dialogOpener = document.querySelector('.openDialogBtn')
-    const dialogCloser = document.querySelector('.closeDialogBtn')
+    const dialogCloser = dialog.querySelector('.closeDialogBtn')
 
     function closeOnBackDropClick({ currentTarget, target }) {
       const dialog = currentTarget
       const isClickedOnBackDrop = target === dialog
       if (isClickedOnBackDrop) {
-        dialog.close()
-        returnScroll()
+        close()
       }
     }
 
@@ -216,6 +209,9 @@ <h2>Дока — самая добрая документация &#128579</h2>
     }
 
     dialog.addEventListener('click', closeOnBackDropClick)
+    dialog.addEventListener('cancel', (event) => {
+      returnScroll()
+    });
     dialogOpener.addEventListener('click', openModalAndLockScroll)
     dialogCloser.addEventListener('click', (event) => {
       event.stopPropagation()
diff --git a/recipes/popup/index.md b/recipes/popup/index.md
index 9bc8c94df9..c71656676b 100644
--- a/recipes/popup/index.md
+++ b/recipes/popup/index.md
@@ -115,7 +115,7 @@ dialog {
 }
 
 dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 0.8);
 }
 
 .scroll-lock {
@@ -128,13 +128,13 @@ dialog::backdrop {
 ```javascript
 const dialog = document.getElementById('myDialog')
 const dialogOpener = document.querySelector('.openDialogBtn')
-const dialogCloser = document.querySelector('.closeDialogBtn')
+const dialogCloser = dialog.querySelector('.closeDialogBtn')
 
 function closeOnBackDropClick({ currentTarget, target }) {
   const dialog = currentTarget
   const isClickedOnBackDrop = target === dialog
   if (isClickedOnBackDrop) {
-    dialog.close()
+    close()
   }
 }
 
@@ -153,6 +153,9 @@ function close() {
 }
 
 dialog.addEventListener('click', closeOnBackDropClick)
+dialog.addEventListener('cancel', (event) => {
+  returnScroll()
+});
 dialogOpener.addEventListener('click', openModalAndLockScroll)
 dialogCloser.addEventListener('click', (event) => {
   event.stopPropagation()
@@ -212,11 +215,11 @@ dialog {
 }
 ```
 
-Встроенной функцией тега `<dialog>` является его подложка. Она появляется в момент открытия попапа и имеет название `::backdrop`. С помощью этого псевдоэлемента мы можем стилизовать задник модального окна, а также реализовать его закрытие по клику на оверлей. Первое реализуем с помощью правил CSS — добавим затемнение на экран за открытым попапом:
+Встроенной функцией тега `<dialog>` является его подложка. Она появляется в момент открытия попапа и имеет название [`::backdrop`](/css/backdrop/). С помощью этого псевдоэлемента мы можем стилизовать задник модального окна, а также реализовать его закрытие по клику на оверлей. Первое реализуем с помощью правил CSS — добавим затемнение на экран за открытым попапом:
 
 ```css
 dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 0.8);
 }
 ```
 
@@ -245,7 +248,7 @@ body {
 ```javascript
 const dialog = document.getElementById('myDialog')
 const dialogOpener = document.querySelector('.openDialogBtn')
-const dialogCloser = document.querySelector('.closeDialogBtn')
+const dialogCloser = dialog.querySelector('.closeDialogBtn')
 ```
 
 Напишем функции для открытия и закрытия попапа. Также поместим в них код, необходимый для блокировки скролла страницы. Не забудем вернуть скролл обратно при закрытии попапа:
@@ -283,12 +286,14 @@ function closeOnBackDropClick({ currentTarget, target }) {
   const dialog = currentTarget
   const isClickedOnBackDrop = target === dialog
   if (isClickedOnBackDrop) {
-    dialog.close()
-    returnScroll()
+    close()
   }
 }
 
 dialog.addEventListener('click', closeOnBackDropClick)
+dialog.addEventListener('cancel', (event) => {
+  returnScroll()
+});
 ```
 
-Другой функцией нашего попапа окажется его закрытие по нажатию на клавишу <kbd>Esc</kbd>. Это является встроенной функцией элемента `<dialog>` и не требует дополнительного кода.
+Другой функцией нашего попапа окажется его закрытие по нажатию на клавишу <kbd>Esc</kbd>. Это является встроенной функцией элемента `<dialog>` и не требует дополнительного кода. Несмотря на то, что закрытие произойдёт автоматически, нам нужно знать об этом событии, чтобы вернуть скролл. Для этого добавим обработку события 'cancel'.