aboutsummaryrefslogtreecommitdiff
path: root/assets/js/fullscreen.js
blob: e3cc342ea193c1e404d0d939f04cb932544383d3 (plain)
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
// page
const fullscreen = document.getElementById('fullscreen');
const fullscreenIcon = document.getElementById('fullscreen-icon');
const smallscreenIcon = document.getElementById('smallscreen-icon');
const elem = document.documentElement;

// Functions

function toggleFullscreen(event) {
  // check if the event is a keydown event or a click event
  if (event.type === 'keydown') {
    // check if the key pressed is '/' key
    if (event.key !== '/') return;
  }
  if (document.fullscreenElement) {
    closeFullscreen();  
  } else {
    openFullscreen();
  }
}

function openFullscreen() {
  smallscreenIcon.classList.toggle('hide');
  fullscreenIcon.classList.toggle('hide');
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  smallscreenIcon.classList.toggle('hide');
  fullscreenIcon.classList.toggle('hide');
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

// Listeners

fullscreen.addEventListener('click', toggleFullscreen);
document.addEventListener('keydown', toggleFullscreen);