Переключайте полноэкранный режим в любом браузере, миксин Sass для полифилла и скрывайте мышь при бездействии
Уже существует дюжина существующих руководств по Web Fullscreen API, но когда в прошлую субботу я модернизировал панель инструментов для режима презентации DeckDeckGo, нашего редактора для презентаций, я заметил, что никогда не делился несколькими полезными трюками, которые мы реализовали.
Эти:
- Как реализовать переключатель для полноэкранного режима, совместимый с любым браузером
- Создайте миксин Sass для полифилляции полноэкранного псевдокласса CSS.
- Скрыть курсор мыши при бездействии
Переключить полноэкранный режим в любом браузере
API предоставляет две функции для переключения режима: requestFullscreen() для перехода в полноэкранный режим или exitFullscreen() в противном случае.
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
Даже если методы хорошо поддерживаются браузером, вы можете заметить на Caniuse небольшую желтую пометку рядом с номером версии.
В настоящее время Safari и предыдущая версия браузера не совместимы с API без префикса функций с их соответствующим префиксом. Вот почему, если вы хотите реализовать функцию, совместимую с несколькими браузерами, стоит добавить их в свой метод.
function toggleFullScreen() {
const doc = window.document;
const docEl = doc.documentElement;
const requestFullScreen =
docEl.requestFullscreen ||
docEl.mozRequestFullScreen ||
docEl.webkitRequestFullScreen ||
docEl.msRequestFullscreen;
const cancelFullScreen =
doc.exitFullscreen ||
doc.mozCancelFullScreen ||
doc.webkitExitFullscreen ||
doc.msExitFullscreen;
if (!doc.fullscreenElement && !doc.mozFullScreenElement &&
!doc.webkitFullscreenElement && !doc.msFullscreenElement) {
requestFullScreen.call(docEl);
} else {
cancelFullScreen.call(doc);
}
}
Обратите внимание, что приведенный выше код я нашел в Основах Google Web.
Sass Mixin
Псевдокласс :fullscreen CSS (задокументированный здесь) полезен для стилизации элементов в соответствии с полноэкранным режимом.
#myId:fullscreen {
background: red;
}
#myId:not(:fullscreen) {
background: blue;
}
Он хорошо поддерживается браузерами, как показывает Caniuse, но вы также можете снова заметить некоторые ограничения, особенно когда речь идет о Safari. Вот почему может быть интересно полифилить псевдокласс.
Более того, если нужно настроить многие элементы в зависимости от режима, было бы интересно использовать Sass и миксин. Вот почему мы используем именно его.
@mixin fullscreen() {
#{if(&, "&", "*")}:-moz-full-screen {
@content;
}
#{if(&, "&", "*")}:-webkit-full-screen {
@content;
}
#{if(&, "&", "*")}:-ms-fullscreen {
@content;
}
#{if(&, "&", "*")}:fullscreen {
@content;
}
}
С его помощью теперь вы можете объявить его один раз и сгруппировать все свои полноэкранные стили.
@include fullscreen() {
#myId {
background: blue;
}
#myMenu {
display: none;
}
#myFooter {
background: yellow;
}
}
У меня есть начинка, что я не писал этот миксин сам, по крайней мере, полностью, но я больше не мог понять, где я его нашел, так как уже некоторое время использую его. Если вы ее автор, дайте мне знать. Буду рад отдать вам должное!
Скрыть указатель мыши при бездействии
Вы также замечаете, что когда докладчик отображает свою презентацию в полноэкранном режиме, курсор мыши все еще отображается где-то на экране?
Я замечаю это и предпочитаю, чтобы это было спрятано 😆. Я имею в виду, что когда я заметил такое поведение в DeckDeckGo, мне пришлось как можно скорее разработать решение. даже если я проводил каникулы в Индии (вы можете проверить мою историю коммитов на GitHub, я не шучу, правдивая история 🤣).
Чтобы обнаружить бездействие, мы прослушиваем событие mousemove. Каждый раз, когда событие запускается, мы сбрасываем таймер и откладываем изменение стиля курсор, чтобы скрыть мышь. Аналогичным образом, если мы переключаемся между полноэкранным и нормальным режимами, мы выполняем ту же функцию.
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Hide mouse on inactivity</title>
</head>
<body style="margin: 0; overflow: hidden;">
<script type="text/javascript">
let idleMouseTimer;
document.addEventListener('mousemove', mouseTimer);
function mouseTimer() {
showHideMouseCursor(true);
clearTimer();
if (!isFullscreen()) {
return;
}
idleMouseTimer = setTimeout(async () => {
showHideMouseCursor(false);
}, 2000);
}
function clearTimer() {
if (idleMouseTimer > 0) {
clearTimeout(idleMouseTimer);
}
}
function isFullscreen() {
return window.innerHeight == screen.height;
}
function showHideMouseCursor(show) {
document.querySelector('div').style
.setProperty('cursor', show ? 'initial' : 'none');
}
function toggleFullScreen() {
const doc = window.document;
const docEl = doc.documentElement;
const requestFullScreen =
docEl.requestFullscreen ||
docEl.mozRequestFullScreen ||
docEl.webkitRequestFullScreen ||
docEl.msRequestFullscreen;
const cancelFullScreen =
doc.exitFullscreen ||
doc.mozCancelFullScreen ||
doc.webkitExitFullscreen ||
doc.msExitFullscreen;
if (!doc.fullscreenElement && !doc.mozFullScreenElement &&
!doc.webkitFullscreenElement &&
!doc.msFullscreenElement) {
requestFullScreen.call(docEl);
} else {
cancelFullScreen.call(doc);
}
mouseTimer();
}
</script>
<div style="display: block; width: 100vw; height: 100vh;">
<button onclick="toggleFullScreen()"
style="position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);">
Toggle fullscreen
</button>
</div>
</body>
</html>
Заключение
Я надеюсь, что эти советы, которые мы применили в нашем наборе редактора и разработчика, когда-нибудь будут кому-то где-нибудь полезны. Если у вас есть вопросы, напишите мне и оставьте комментарии.
Попробуйте DeckDeckGo для вашей следующей презентации 😇.
Бесконечность не предел
Дэйвид
