Fullscreen API example

http://www.kutac.cz/blog/weby-a-vse-okolo/mene-zname-webove-api-1/

HTML

<div id="output"><b>Výstup</b></div>

<div>
  <img id="image" src="https://placeimg.com/800/600/animals" alt="Animal" />
</div>

<button id="show-fullscreen-image">Otevři fullscreen obrázek</button>
<button id="show-fullscreen-document">Otevři fullscreen stránku</button>

<p>Kliknutím na obrázek ve fullscreenu se fullscreen režim ukončí.</p>

CSS

#output {
  float: right;
  text-align: right;
}

#image {
  width: 250px;
  height: auto;
}

#image:fullscreen {
  width: 100%;
  height: auto;
}
#image:-webkit-full-screen {
  width: 100%;
  height: auto;
}
#image:-moz-full-screen {
  width: 100%;
  height: auto;
}
#image:-ms-fullscreen {
  width: 100%;
  height: auto;
}

:fullscreen,
:fullscreen body {
  background-color: #8fa5c7;
}
:-webkit-full-screen,
:-webkit-full-screen body {
  background-color: #8fa5c7;
}
:-moz-full-screen,
:-moz-full-screen body {
  background-color: #8fa5c7;
}
:-ms-fullscreen,
:-ms-fullscreen body {
  background-color: #8fa5c7;
}

Babel + JSX

const output = document.querySelector('#output')
const printOut = (s) => output.innerHTML += `<br>${s}`

// Je Fullscreen API k dispozici?
const isFullscreenEnabled = 
	document.fullscreenEnabled || 
  document.mozFullScreenEnabled || 
  document.webkitFullscreenEnabled ||
  document.msFullscreenEnabled

// Vendor prefixy spuštění fullscreenu
const requestFullscreen = (element) => {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } 
  else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  }
  else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  }
  else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}

// Vendor prefixy zavření fullscreenu
const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  }
  else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  }
  else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
  else if (document.msExitFullscreen) {
		document.msExitFullscreen()
	}
}

// Kontrola podpory prohlízeče
if (isFullscreenEnabled) {

	const imgElement = document.querySelector('#image')
  const docElement = document.documentElement
  const btnShowImg = document.querySelector('#show-fullscreen-image')
  const btnShowDoc = document.querySelector('#show-fullscreen-document')
  
  // Do fullscreenu je možné přepnout jakýkoliv standardní HTML element včetně iframe
  btnShowImg.addEventListener('click', () => {
    requestFullscreen(imgElement)
  })
  
  // exitFullscreen metoda je dostupná pouze na objektu document
  imgElement.addEventListener('click', (e) => {
  	// Vendor prefixy přístupu k aktivnímu fullscreen elementu
  	const fullscreenElement = 
    	document.fullscreenElement || 
  		document.webkitFullscreenElement || 
  		document.mozFullScreenElement ||
      document.msFullscreenElement
      
    // document.fullscreenElement je vždy daný element nebo null
   ...