Um recurso muito interessante que vem sendo utilizado ultimamente nos site, é o recurso de Fullscreem para a exibição de vídeo e imagens. O que é mais interessante, é que este recurso pode ser aplicado, não só para vídeos e imagens. Um formulário ou dashboard também podem ser exibidos em Fullscreem.
Neste artigo, vou ensinar com aplicar o Fullscreem em um elemento específico da página. Vamos criar uma página simples que utiliza Javascript para exibir uma imagem em Fullscreem.
O Fullscreem é o modo de exibição dos navegadores onde o site é exibido em toda e tela, sem a modula do navegador. Esse modo de visualização, pode ser ativado pressionando-se a tecla F11, isso por padrão para qualquer site. Este recurso foi implementado pela Fullscreen API do HTML5, e pode controlada pelo Javascript. Não vou entrar em detalhes API pois o objetivo é um artigo objetivo e prático. Então se você quiser saber um pouco mais sobre a HTML5 Fullscreen API, é só pesquisar na web que já conta com vários artigos sobre o assunto.
HTML
Vamos começar pelo HTML. É um HTML muito simples onde vamos apenas exibir uma imagem na página como um thumbnail.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE HTML> <html> <head> <title>Fullscreem</title> </head> <body onload="docReady()"> <div id="container"> <div id="fullScreenTools" class="botao"> <input id="closer" class="icon" name="closer" type="button" value="X"> </div> <img id="trigger" src="http://guiaviajarmelhor.com.br/wp-content/uploads/2015/05/Escocia-edimburgo.png" width="20%" alt=""> </div> </body> </html> |
Temos duas DIVs. Uma é a DIV fullScreemTools. Esta é uma barra localizada na parte superior da tela onde poderão ser inseridos botões para fechar e outras operações. Neste exemplo, eu preferi que esta DIV fosse somente um botão transparente com um “X”, localizado na parte superior direita da tela, que quando clicado, encerra o modo fullscreen. Para isso, adicionei a classe CSS botao à DIV. Para ver a DIV como barra, basta retirar esta classe.
A outra, é a DIV container. Esta DIV será o elemento para o qual vamos implementar o recurso de ativação do modo de exibição fullscreen. A DIV contém a barra de ferramentas/botão fullScreemTools e a imagem. Então quando o modo fullscreen for ativado para a DIV container, tudo dentro dela será exibido em tela cheia.
Merece atenção especial, o atributo do tag body que define a função que deverá ser executada no evento onload do documento. Esta é a função principal do nosso código Javascript e nela que serão incluído todo o nosso script. No final do bloco sobre Javascript, entrarei em detalhes sobre esta função.
CSS
No exemplo eu optei por manter o CSS e o Javascript no mesmo arquivo HTML embutindo tudo dentro do código HEAD da página, mas nada impede que você use arquivos separados.
A folha de estilo para este projeto não tem nenhum mistério, então não vou me aprofundar nela. O único detalhe que merece atenção, é a regra para o elemento #container, onde os valores das propriedades top, left, bottom e right foram ajustados para 0 (zero). Vamos detalhar isto mais a frente, na seção que fala sobre o Javascript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<style> * { /* padding e a border não serão atribuidas a largura do elemento */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; } #container { position: relative; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; } /* a barra fica 100% da largura da tela */ #fullScreenTools { position: relative; display: none; width: 100%; padding: 5px; text-align: right; background-color: #000000; opacity:0.65; -moz-opacity: 0.65; filter: alpha(opacity=65); } /* aqui a barra se torna um botao a direita da tela */ #fullScreenTools.botao { position: fixed; top: 50px; right: 50px; height: 50px; width: 50px; padding: 0; border: 1px solid #fff; background-color: transparent; } #fullScreenTools.botao:hover { width: 60px; height: 60px; top: 45px; right: 45px; } #closer { margin-right: 10px; color: #fff; border: none; border: 1px solid #fff; background-color: transparent; } #closer.icon { width: 100%; height: 100%; margin-right: 0; font-size: 23px; color: #fff; border: none; background-color: transparent; } #closer.icon:hover { font-size: 30px; } </style> |
JAVASCRIPT
Agora vamos ao mais importante. O código que realmente faz a coisa funcionar, o Javascript. Vou dividir o código em parte mas ele deve ficar em um único bloco <script>.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
"use strict"; // V A R I A V E I S var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled; var elem; var tools; var trigger; var isFull; var method; // Se for o padrao, recebe uma string vazia. Se for webkit, ms ou moz, recebe o prefixo correspondente. var closer; // Elemento que quando clicado, sai da tela cheia. var trigger_w; // F U N C O E S var enterFullScreen; // Funcao entra no modo tela cheia var exitFullScreen; // Funcao sai do modo tela cheia var isFullScreen; |
No trecho acima declaramos os nome das variáveis e funções do script.
Na primeira linha, usei a diretiva use strict. Isso vai permitir melhorar a qualidade do nosso código JavaScript. Quem quiser saber mais sobre use strict, pode acessar o site escola do W3C.
Nas linhas seguintes, são declarados os nomes das variáveis e funções utilizadas no script.
Funções principais
São duas as funções principais do projeto. As funções enterFullScreen e exitFullScrren. Ambas utilizam a HTML5 Full-Screen API. Vamos a elas.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/** * Ativa modo fullscreen */ enterFullScreen = function(element,callBack) { isFull = false; method = null; element.style.position = "absolute"; if (element.requestFullscreen) { element.requestFullscreen(); isFull = true; method = ""; } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); isFull = true; method = "ms"; } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); isFull = true; method = "moz"; } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); isFull = true; method = "webkit"; } if(isFull) { if(callBack!=undefined) callBack(); } } /** * Desativa modo fullscreen */ exitFullScreen = function(element, callBack) { element.style.position = "initial"; if(document.exitFullscreen) { document.exitFullscreen(); isFull = false; } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); isFull = false; } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); isFull = false; } if(isFull===false) { if(callBack!=undefined) callBack(); } } |
Como a API não é totalmente compatível com todas versões de navegadores, as duas funções utilizam de métodos de compatibilidade MS, Moz e Webkit.
Funções secundárias
Só temos uma função secundária. É a função isFullScreen.
1 2 3 4 5 6 7 8 9 10 |
/** * Determina se esta em modo tela cheia ou nao */ isFullScreen = function() { return document.fullScreen || document.msFullScreen || document.mozFullScreen || document.webkitIsFullScreen; } |
Esta função utiliza o método fullScreen da API para determinar se o modo fullscreen está ativado ou não.
Mais Javascript
Além das funções principais e secundárias, nosso Javascript ainda conta coma mais algumas linhas código que vamos descrever agora.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// O elemento a ser exibido em fullscreen elem = document.getElementById("container"); // Barra/botao exibido em fullscreen tools = document.getElementById("fullScreenTools"); // Elemento da página que ao ser clicado ativa o fullscreen trigger = document.getElementById("trigger"); // Como no projeto o trigger é uma imagem, e a imagem está sendo exibida // de forma reduzida, guardo a largura com que ela esta sendo exibida para // recuperar quando o modo fullscreen for desativado. trigger_w = trigger.width; // Elemento da página que ao ser clicado dasativa o fullscreen closer = document.getElementById("closer"); |
O fragmento acima, define os valores das variáveis do sistema. O próprio código tem a descrição de cada uma delas, por isso não vou me aprofundar.
Chegou a hora de definir os event listenners, ou censores de eventos (não encontrei uma tradução melhor), para os elementos trigger e closer.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** * Adicionando censor de evento ao elemento que ativam a tela cheia */ trigger.addEventListener("click", function() { this.style.width = "100%"; enterFullScreen(elem, function() { if( isFull ) { tools.style.display = "block"; } }); }); /** * Adicionando censor de evento ao botão que desativa a tela cheia */ closer.addEventListener("click", function() { trigger.style.width = trigger_w + "px"; //"initial"; exitFullScreen(elem, function() { if( !isFull ) { tools.style.display = "none"; } }); }); |
No fragmento acima, fazemos a chamada a duas funções. Uma para ativar e outra para desativar o modo fullscreen. São as funções enterFullScreen e exitFullScreen.
A função enterFullScreen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/** * Entra em tela cheia */ enterFullScreen = function(element,callBack) { isFull = false; method = null; element.style.position = "absolute"; if (element.requestFullscreen) { element.requestFullscreen(); isFull = true; method = ""; } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); isFull = true; method = "ms"; } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); isFull = true; method = "moz"; } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); isFull = true; method = "webkit"; } if(isFull) { if(callBack!=undefined) callBack(); } } |
Esta função recebe dois parâmetros. O primeiro é o identificador do elemento que deve ser exibido em fullscreen contido na variável pública elem, declarada no início do script e cujo o valor é definido na função docReady que será detalhada mais a frente. O segundo parâmetro é uma função de callback que no caso, altera a propriedade CSS display de fullScreemTools para block, o que faz com ele seja exibida, como pode ser visto na definição dos event listenner de trigger.
Na função enterFullScreen, primeiro nós alteramos a propriedade CSS position do elemento para absolute. Isso possibilita a configuração das propriedades top, left, bottom e right para 0 (zero), fazendo com que o elemento, no caso a DIV container, ocupe 100% da tela. Este método funciona melhor do que definir o valor das propriedades width e height para 100%.
Não basta apenas ativar o modo fullscreen, pois isto apenas coloca a janela do navegador em tela cheia. Também é necessário ajustar o CSS da DIV container para que a DIV ocupe toda a janela.
Em seguida, ativamos o modo fullscreen e depois fazemos a chamada a função de callback já mencionada acima.
A função exitFullScreen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * Sai da tela cheia */ exitFullScreen = function(element, callBack) { element.style.position = "initial"; if(document.exitFullscreen) { document.exitFullscreen(); isFull = false; } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); isFull = false; } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); isFull = false; } if(isFull===false) { if(callBack!=undefined) callBack(); } } |
A função exitFullScreen, basicamente reverte o que foi feito na função enterFullScreen.
Na primeira linha, revertemos a propriedade CSS position do elemento DIV container para o seu valor inicial ou padrão. Depois, desativamos o modo fullscreen e em seguida, fazemos a chamada da função de callback, que como pode ser visto no event listener de closer, altera a propriedade CSS display de fullScreemTools para none, o que oculta o elemento fullScreemTools.
Finalizando
Agora chegou a hora de juntar todas as parte do quebra-cabeças. Como mencionada no início deste artigo, na parte referente ao HTML, todas os fragmentos de código Javascript, exceto o primeiro fragmento de declaração de variáveis, devem estar dentro da função docReady. A chamada desta função será feita no tag body do documento através do atributo onload. Isto fará com que a função seja executada somente depois que todos os elementos do documento forem carregados pelo navegador.
Segue o código completo da página com o CSS e o Javascript embutidos no HTML, dentro do tag head.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 |
<!DOCTYPE HTML> <html> <head> <title></title> <meta charset="ISO-8859-1"> <style> * { /* padding e a border não serão atribuidas a largura do elemento */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; } #container { position: relative; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; } /* a barra fica 100% da largura da tela */ #fullScreenTools { position: relative; display: none; width: 100%; padding: 5px; text-align: right; background-color: #000000; opacity:0.65; -moz-opacity: 0.65; filter: alpha(opacity=65); } /* aqui a barra se torna um botao a direita da tela */ #fullScreenTools.botao { position: fixed; top: 50px; right: 50px; height: 50px; width: 50px; padding: 0; border: 1px solid #fff; background-color: transparent; } #fullScreenTools.botao:hover { width: 60px; height: 60px; top: 45px; right: 45px; } #closer { margin-right: 10px; color: #fff; border: none; border: 1px solid #fff; background-color: transparent; } #closer.icon { width: 100%; height: 100%; margin-right: 0; font-size: 23px; color: #fff; border: none; background-color: transparent; } #closer.icon:hover { font-size: 30px; } </style> <script> "use strict"; // V A R I A V E I S var elem; var tools; var trigger; var isFull; var method; // Se for o padrao, recebe uma string vazia. Se for webkit, ms ou moz, recebe o prefixo correspondente. var closer; // Elemento que quando clicado, sai da tela cheia. var trigger_w; // F U N C O E S var enterFullScreen; // Funcao entra no modo tela cheia var exitFullScreen; // Funcao sai do modo tela cheia var isFullScreen; /********************************* * QUANDO O DOCUMENTO ESTIVER CARREGADO */ var docReady = function() { // o elemento a ser exibido em fullscreen //elem = document.documentElement; // a pagina em si elem = document.getElementById("container"); // um elemento da pagina // barra/botao exibido em fullscreen tools = document.getElementById("fullScreenTools"); // elemento da página que ao ser clicado ativa o fullscreen trigger = document.getElementById("trigger"); // como no projeto o trigger é uma imagem, tenho que ajustar o tamanho da imagem ao container trigger_w = trigger.width; // elemento da página que ao ser clicado dasativa o fullscreen closer = document.getElementById("closer"); /** * Adicionando censor de evento aos elementos que ativam a tela cheia */ trigger.addEventListener("click", function() { this.style.width = "100%"; enterFullScreen(elem, function() { if( isFull ) { tools.style.display = "block"; } }); }); document.getElementById("btn1").addEventListener("click", function() { trigger.dispatchEvent(new Event("click")); }); /** * Adicionando censor de evento ao botao que sai da tela cheia */ closer.addEventListener("click", function() { trigger.style.width = trigger_w + "px"; //"initial"; exitFullScreen(elem, function() { if( !isFull ) { tools.style.display = "none"; } }); }); /** * Entra em tela cheia */ enterFullScreen = function(element,callBack) { isFull = false; method = null; element.style.position = "absolute"; if (element.requestFullscreen) { element.requestFullscreen(); isFull = true; method = ""; } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); isFull = true; method = "ms"; } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); isFull = true; method = "moz"; } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); isFull = true; method = "webkit"; } if(isFull) { if(callBack!=undefined) callBack(); } } /** * Sai da tela cheia */ exitFullScreen = function(element, callBack) { element.style.position = "initial"; if(document.exitFullscreen) { document.exitFullscreen(); isFull = false; } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); isFull = false; } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); isFull = false; } if(isFull===false) { if(callBack!=undefined) callBack(); } } /** * Determina se esta em modo tela cheia ou nao */ isFullScreen = function() { return document.fullScreen || document.msFullScreen || document.mozFullScreen || document.webkitIsFullScreen; } /** * Quando a entrar ou sair da tela cheia */ window.onresize = function() { if( !isFullScreen() ) { closer.dispatchEvent(new Event("click")); } } } </script> </head> <body onload="docReady()"> <div id="container"> <div id="fullScreenTools" class="botao"> <input id="closer" class="icon" name="closer" type="button" value="X"> </div> <img id="trigger" src="http://guiaviajarmelhor.com.br/wp-content/uploads/2015/05/Escocia-edimburgo.png" width="20%" alt=""> </div> </body> </html> |
Bom está ai a página completa. Espero que sirva bem para esclarecer as dúvidas de quem precisa implementar este recurso em um projeto.
Para qualquer dúvida, sugestão ou colaboração, deixe no seu comentário.