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

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

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

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

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

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

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

Работать с полноэкранным 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(). Этот метод переключит текущий элемент обратно в оконный режим из полноэкранного.

В моем примере я создал кнопку «Exit Fullscreen» и использовал слушателей событий для запуска метода exitFullscreen().

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

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

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

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

Функция 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:fullscreen { display: flex; align-items: center; background-color: brown; color: white;
}

После стилизации <p> с помощью :fullscreen

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

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

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

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

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

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

Заключение

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

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

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

Автор: Dulanka Karunasena

Источник: blog.bitsrc.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен