À medida que caminhamos para aplicações web mais verdadeiras, nossas APIs JavaScript têm feito o melhor possível para acompanhar. Uma nova API JavaScript bastante simples, mas muito útil, é a Fullscreen. A API Fullscreen oferece uma maneira bem pragmática de requisitar a exibição em tela cheia para o usuário, e de sair desse modo de visualização quando desejado. Aqui está como utilizar essa API incrivelmente simples! Veja a demo.

Iniciando o modo Fullscreen

O método requestFullscreen da API Fullscreen ainda é pré-fixado em alguns browsers, então você precisa de fazer alguma pesquisa para encontrar isto:

// Find the right method, call on correct element
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element

Você pode apenas requisitar o método no elemento que quer haja visualização em tela cheia (full screen) e a janela se transforme dessa maneira, requisitando que o usuário permita a visualização em full screen. Lembre que é possível que o usuário rejeite o modo de tela cheia. Se for aceito, as barras de ferramentas sumirão, fazendo com que o documento ocupe a largura e a altura totais da tela.

Saindo do modo Fullscreen

O método exitFullscreen (também pré-fixado em alguns navegadores mais antigos) vai restaurar a janela para o layout padrão:

// Whack fullscreen
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

// Cancel fullscreen for browsers that support it!
exitFullscreen();

Observe que o existFullscreen é chamado apenas no objeto do documento – não há necessidade de passar para o elemento individual.

Propriedades e eventos de Fullscreen

Infelizmente os eventos e as propriedades ainda são pré-fixados, mas isso vai mudar com o tempo. O evento fullscreenchange nos permite saber quando estamos entrando/saindo do modo de tela cheia: você pode detectar qual evento pré-fixado do browser deve usar com o método inicial de detecção de fullscreen.

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

Fullscreen CSS

Os browsers oferecem um controle CSS de fullscreen pequeno, mas bem útil:

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

Em alguns casos, o Webit precisa de uma ajudinha, então o código acima deve ser bastante útil se você estiver lidando com mídia. Veja a demo. A API Fullscreen é super simples e super útil. A primeira vez que a vi em uso foi em uma demo do MDN do BananaBread, um jogo de tiro em primeira pessoa todo feito no client, uma desculpa perfeita para usar a tela cheia. A API oferece uma forma para entrar e sair do modo de fullscreen, assim como um evento para detectar a mudança de estado da tela cheia, então está tudo coberto. Tenha essa API bacana em mente para novas empreitadas – pode ser útil!

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://davidwalsh.name/fullscreen