CloseWatcher

Интерфейс CloseWatcher позволяет настроить пользовательский элемент управления с семантикой открытия и закрытия, который реагирует на действия закрытия, специфичные для устройства, таким же образом, как и встроенный элемент.

Интерфейс CloseWatcher наследует от EventTarget.

CloseWatcher() Экспериментально

Создаёт новый экземпляр CloseWatcher.

Этот интерфейс также наследует методы от своего родителя, EventTarget.

CloseWatcher.requestClose() Экспериментально

Вызывает событие cancel и, если это событие не отменено с помощью Event.preventDefault(), продолжает вызывать событие close, а затем, наконец, деактивирует наблюдатель закрытия, как если бы destroy() был вызван.

CloseWatcher.close() Экспериментально

Немедленно вызывает событие close без предварительного вызова cancel и деактивирует наблюдатель закрытия, как если бы destroy() был вызван.

CloseWatcher.destroy() Экспериментально

Деактивирует наблюдатель закрытия, так что он больше не будет получать события close.

cancel Экспериментально

Событие, которое срабатывает перед событием close, чтобы close можно было предотвратить.

close Экспериментально

Событие, которое срабатывает при получении запроса на закрытие.

Некоторые элементы пользовательского интерфейса имеют "поведение закрытия", означающее, что элемент появляется, и пользователь может закрыть его, когда он закончит с ним. Например: боковые панели, всплывающие окна, диалоговые окна или уведомления.

Пользователи, как правило, ожидают возможности использовать определенный механизм для закрытия этих элементов, и этот механизм, как правило, специфичен для устройства. Например, на устройстве с клавиатурой это может быть клавиша Esc, а Android может использовать кнопку "Назад". Для встроенных элементов, таких как popover или <dialog> элементы, браузер обрабатывает эти различия, закрывая элемент, когда пользователь выполняет действие закрытия, соответствующее устройству. Однако, когда веб-разработчик реализует свой собственный элемент пользовательского интерфейса с возможностью закрытия (например, боковую панель), трудно реализовать такой тип поведения закрытия, специфичного для устройства.

Интерфейс CloseWatcher решает эту проблему, передавая событие cancel, за которым следует событие close, когда пользователь выполняет действие закрытия, специфичное для устройства. Веб-приложения могут использовать обработчик onclose для закрытия элемента пользовательского интерфейса в ответ на событие, специфичное для устройства. Они также могут вызывать эти же события в ответ на обычный механизм закрытия элемента пользовательского интерфейса и затем реализовать общую обработку события close для действия закрытия как прикладного, так и специфичного для устройства. После завершения обработки события onclose обработчик CloseWatcher уничтожается, и события больше не будут вызываться.

В некоторых приложениях элемент пользовательского интерфейса может закрываться только при определенном состоянии; например, когда заполнены некоторые необходимые данные. Чтобы решить эти случаи, приложения могут предотвратить вызов события close путём реализации обработчика события cancel , вызывающего Event.preventDefault(), если элемент пользовательского интерфейса не готов к закрытию.

Вы можете создать экземпляры CloseWatcher без активации пользователя, и это может быть полезно для реализации случаев, таких как диалоговые окна таймаута неактивности сеанса. Однако, если вы создадите более одного наблюдателя CloseWatcher без активации пользователя, то наблюдатели будут объединены, поэтому один запрос на закрытие закроет их оба. Кроме того, первый наблюдатель закрытия не обязательно должен быть объектом CloseWatcher: он может быть элементом модального диалогового окна или всплывающим окном, созданным элементом с атрибутом всплывающего окна

В этом примере у вас есть свой собственный элемент пользовательского интерфейса (пикер), и вы хотите поддерживать как метод закрытия по умолчанию платформы (например, клавишу Esc), так и свой собственный метод закрытия (кнопку "Закрыть").

Вы создаёте CloseWatcher для обработки всех событий close.

Обработчик onclick вашего элемента пользовательского интерфейса может вызвать requestClose для запроса закрытия и маршрутизации вашего запроса на закрытие через тот же обработчик onclose , который использует метод закрытия платформы.

const watcher = new CloseWatcher();
const picker = setUpAndShowPickerDOMElement();
let chosenValue = null;

watcher.onclose = () => {
  chosenValue = picker.querySelector("input").value;
  picker.remove();
};

picker.querySelector(".close-button").onclick = () => watcher.requestClose();

В этом примере у нас есть компонент боковой панели, который отображается при выборе кнопки "Открыть" и скрывается с помощью кнопки "Закрыть" или средствами платформы. Для большей наглядности, это интерактивный пример!

Обратите также внимание, что пример немного искусственный, так как обычно мы будем использовать переключатель для изменения состояния боковой панели. Мы, безусловно, могли бы это сделать, но использование отдельных кнопок "Открыть" и "Закрыть" упрощает демонстрацию функции.

HTML

HTML определяет элементы <button> "Открыть" и "Закрыть", а также элементы <div> для основного содержимого и боковой панели. Используется CSS для анимации отображения элемента боковой панели при добавлении или удалении класса open к элементам боковой панели и содержимого (этот CSS скрыт, так как он не относится к данному примеру).

<button id="sidebar-open" type="button">Open</button>
<button id="sidebar-close" type="button">Close</button>
<div class="sidebar">Sidebar</div>
<div class="main-content">Main content</div>

JavaScript

Код сначала получает переменные для кнопок и элементов <div> , определенных в HTML. Он также определяет функцию closeSidebar() , которая вызывается при закрытии боковой панели, чтобы удалить класс open из элементов <div> и добавляет обработчик события click , который вызывает метод openSidebar() при нажатии кнопки "Открыть".

const sidebar = document.querySelector(".sidebar");
const mainContent = document.querySelector(".main-content");
const sidebarOpen = document.getElementById("sidebar-open");
const sidebarClose = document.getElementById("sidebar-close");

function closeSidebar() {
  sidebar.classList.remove("open");
  mainContent.classList.remove("open");
}

sidebarOpen.addEventListener("click", openSidebar);

Реализация openSidebar() приведена ниже. Метод сначала проверяет, открыта ли боковая панель, и если нет, добавляет класс open к элементам, чтобы боковая панель отобразилась.

Затем мы создаём новый CloseWatcher и добавляем слушатель, который будет вызывать close() на нём, если нажата кнопка "Закрыть". Это гарантирует, что событие close вызывается при использовании как методов закрытия платформы, так и кнопки "Закрыть". Реализация обработчика события onclose() просто закрывает боковую панель, а CloseWatcher затем автоматически уничтожается.

function openSidebar() {
  if (!sidebar.classList.contains("open")) {
    sidebar.classList.add("open");
    mainContent.classList.add("open");

    //Add new CloseWatcher
    const watcher = new CloseWatcher();

    sidebarClose.addEventListener("click", () => watcher.close());

    // Handle close event, invoked by platform mechanisms or "Close" button
    watcher.onclose = () => {
      closeSidebar();
    };
  }
}

Обратите внимание, что мы выбрали вызов close() для наблюдателя вместо CloseWatcher.requestClose(), потому что нам не нужно, чтобы событие cancel было вызвано (мы бы использовали requestClose() и обработчик события cancel , если бы была причина предотвратить преждевременное закрытие боковой панели).

Результат

Выберите кнопку "Открыть", чтобы открыть боковую панель. Вы должны иметь возможность закрыть боковую панель, нажав кнопку "Закрыть" или используя обычный метод платформы, например, клавишу Esc в Windows.

• close событие в элементе HTMLDialogElement