CODEWITHSUNDEEP
javascript
foxer
foxer

Reputation: 901

Detect when fullscreen mode exited

I want to detect when fullscreen mode has been exited in chrome. So I have this code that is supposed to work correctly, But it dosn't...

// Detect if fullscreen is exited
document.addEventListener("fullscreenchange", function() { 

  console.log('fullscreen state changed');

  if(document.webkitIsFullScreen === false){
     console.log('Not in fullscreen');
  }

});

If I enter fullscreen mode via a button click the above code works fine, But when I enter to fullscreen mode using F11 or via chrome menu, it doesn't do anything! Why? And how to fix this...

Upvotes: 1

Views: 1251

Answers (1)

zer00ne
zer00ne

Reputation: 43880

There is one property and an event (as well as the equivalent on-event handler) of the Fullscreen API that will facilitate OP's objective:

Detect when fullscreen mode is exited

Fullscreen API

  1. Register <html> to the fullscreenchange event:

    document.documentElement.addEventListener('fullscreenchange', callbackFuction)

/* OR */

document.documentElement.onfullscreenchange = callbackFunction;

  2. Determine if there's element in fullscreen mode using the .fullscreenElement property:

    if (document.fullscreenElement) {...

Demo

Note: Fullscreen does not function properly on this site. Review this FIDDLE to see the code function properly. 

const root = document.documentElement;
const main = document.querySelector('main');

root.onfullscreenchange = screenMode;
main.onclick = switchNode;

function switchNode(event) {
  const clicked = event.target;
  if (clicked.tagName === "BUTTON") {
    let selector = clicked.dataset.sel || ":root";
    const node = document.querySelector(selector);
    if (document.fullscreenElement && !clicked.classList.contains('full')) {
      document.exitFullscreen();
      clicked.classList.add('full');
      clicked.classList.remove('exit');
    } else {
      node.requestFullscreen();
      clicked.classList.add('exit');
      clicked.classList.remove('full');
    }
  }
}

function screenMode(event) {
  if (!document.fullscreenElement) {
    document.querySelectorAll('button').forEach(button => {
      button.classList.add('full');
      button.classList.remove('exit');
    });
  }
}
:root,
body {
  width: 100%;
  height: 100%;
  font: 400 3vw/1.45 Verdana, sans-serif;
  background: #000;
}

main {
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 10px 20px;
}

figure {
  width: 20vw;
  height: 35vw;
  background-image: url(https://i.ibb.co/vYvt1Vx/bobafett2.png);
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0;
  margin: 25px auto 0;
}

figcaption {
  width: 100%;
  text-align: right;
  background: transparent;
}

button.toggle {
  display: inline-block;
  color: #fff;
  transform: rotate(-45deg);
  font: inherit;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}

button.full {
  font-size: 1.5rem;
}

button.full::before,
button.exit::after {
  content: '\25c0';
}

button.full::after,
button.exit::before {
  content: '\25b6';
}

figure:fullscreen {
  background-image: url(https://i.ibb.co/7Qghbj3/bobafett1.jpg);
}

figure:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
<main>
  <button class='toggle full' type='button' style='float: right'></button>
  <figure class='frame'>
    <figcaption>
      <button class='toggle full' data-sel='.frame' type='button'></button>
    </figcaption>
  </figure>
</main>

Upvotes: 1

Related Questions