Создание полноэкранных веб-приложений

Создание впечатляющего взаимодействия с пользователем с помощью полноэкранных элементов

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

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

Что такое полноэкранный API?

Полноэкранный API предоставляет методы для интеграции полного экрана в элементы DOM и их дочерние элементы. Разработчики могут использовать эту функцию, чтобы подчеркнуть полезную информацию для конечных пользователей.

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

Примечание. Браузеры поддерживают полноэкранный API по-разному, поскольку Safari не полностью поддерживает эту функцию. Но мы можем решить эту проблему, используя префиксы поставщиков, и я объясню это в следующих разделах.

Практическое использование полноэкранного API

Работать с полноэкранным API очень просто. Он содержит ограниченный набор функций, и все, что нам нужно сделать, это немного настроить.

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

Шаг 1. Запрос полноэкранного режима

Полноэкранный API предоставляет метод requestFullscreen() для запроса полноэкранного просмотра из браузера. Это вернет обещание, которое разрешится после активации полноэкранного режима.

let fullscreenHandler = document.querySelector(".fullscreenButton");
fullscreenHandler.addEventListener("click", () => {
      document.documentElement.requestFullscreen();
});

Здесь я прослушал событие нажатия кнопки и запросил полноэкранный режим для document. В результате все приложение перейдет в полноэкранный режим.

Мы можем использовать функцию requestFullscreen() для любого элемента.

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

let mapHandler = document.querySelector(".mapButton");
mapHandler.addEventListener("click", () => {
      document.querySelector("iframe").requestFullscreen();
});

Шаг 2 - Выход из полноэкранного режима

Выйти из полноэкранного режима очень просто, так как пользователь может использовать клавишу Esc или любой другой традиционный метод.

Однако, если вы хотите реализовать это с помощью настраиваемой кнопки, вы можете использовать метод exitFullscreen(). Это метод для всего документа, который переключит текущий элемент обратно в оконный режим из полноэкранного режима.

В моем примере я создал кнопку «Выход из полноэкранного режима» и использовал прослушиватель событий для запуска этого метода.

let exitButton = document.querySelector(".exitButton");
exitButton.addEventListener("click", () => {
      document.exitFullscreen();
});

Шаг 3 - переключение полноэкранного режима

Иногда вы можете предпочесть использовать одну кнопку-переключатель для включения и отключения полноэкранного режима, чем использовать несколько кнопок. Но полноэкранный API не обеспечивает прямого подхода к переключению между оконным и полноэкранным режимами.

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

В этом примере я буду использовать указанные ниже свойства, чтобы проверить, поддерживает ли браузер полноэкранный режим или приложение уже находится в полноэкранном режиме.

document.fullscreenEnabled - это свойство проверяет, поддерживает ли браузер полноэкранный режим и разрешено ли это пользователем.
document.fullscreenElement — Это свойство возвращает текущий элемент в полноэкранном режиме. Возвращает null, если мы не в полноэкранном режиме.

Функция toggleFullscreen() будет выглядеть так.

toggleFullscreen = () => {
  if (document.fullscreenEnabled) {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      document.documentElement.requestFullscreen();
    }
  } else {
    alert("Fullscreen is not supported!");
  }
}

Здесь я сначала проверил поддержку браузера и проверил, отображается ли элемент в настоящее время в полноэкранном режиме. В зависимости от результата приложение выйдет или запросит полноэкранный режим.

Наконец, вы можете привязать этот метод к нажатию кнопки или нажатия клавиши, как показано ниже:

// Button Click
let toggler = document.querySelector(".toggler");
toggler.addEventListener("click", () => {
    toggleFullscreen();
});
//Keyboard Key Press
document.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
      toggleFullscreen();
  }
});

Шаг 4 - Полноэкранный стиль

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

Если я применяю приведенный ниже класс CSS к элементу желтого фона <p> в приведенном выше примере, его цвет фона будет изменен на коричневый, цвет шрифта - на белый, а текст выровнен по центру экрана.

p:fullscreen {
  display: flex;
  align-items: center;
  background-color: brown;
  color: white;
}

Совет. Мы можем использовать псевдоэлемент ::backdrop для стилизации элемента, который находится непосредственно под полноэкранным элементом.

Использование префиксов поставщиков

Как я уже упоминал ранее, браузер Safari не полностью поддерживает функции, которые мы обсуждали выше.

Полноэкранный API поставляется в комплекте с префиксами поставщиков для каждого метода и свойства, которые мы обсуждали ранее, чтобы решить эту проблему.

Эти префиксы представляют собой часто используемые браузеры, такие как Firefox, Edge и движок Apple WebKit.

Чаще всего используются префиксы mos-, ms- и webkit-.

Например, мы можем использовать mozRequestFullScreen(), msRequestFullscreen() и webkitRequestFullscreen() для входа в полноэкранный режим.

Совет: Вы можете найти полный список префиксов поставщиков для полноэкранного API в MDN Docs.

Заключение

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

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

Однако мы можем легко преодолеть эти проблемы совместимости, используя префиксы поставщиков или сторонние библиотеки, такие как response-fullscreen, react-hooks-full-screen, screenfull.js и fscreen.

Итак, я предлагаю вам попробовать полноэкранный API в своих приложениях и поделиться своим опытом в разделе комментариев.

Спасибо за чтение !!!

Создавайте лучшие библиотеки компонентов и системы проектирования

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

Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания, совместного использования и внедрения компонентов в разных командах и приложениях. Создайте центр компонентов бесплатно попробуйте →