Fullscreem com Javascript

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.

<!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>

<!DOCTYPE HTML>

<html>

<head>

<title>Fullscreem</title>

</head>

</div>

</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.

<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>

<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>.

"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;

"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.

/**
*  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();
   }

}

/**

* 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.

/**
*  Determina se esta em modo tela cheia ou nao
*/
isFullScreen = function() {
   return document.fullScreen ||
          document.msFullScreen ||
          document.mozFullScreen ||
          document.webkitIsFullScreen;

}

/**

* 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.

// 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 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.

/**
*   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";
      }
   });

});

/**

* 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

/**
*  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();
   }

}

/**

* 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

/**
*   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();
   }

}

/**

* 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.

<!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>

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>

<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>

"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>

</div>

</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.

Jorge Rodrigues

Webmaster e desenvolvedor web full-stack. Self-employed na Concepção Web. Técnico em processamento de dados, com especialização em Programação de Computadores, Redes Locais e em Protocolo e Cabeamento Estruturada de Redes Locais pela Universidade Estácio de Sá.