How to use screenfull - 10 common examples

return new Promise(resolve => {
        if (screenfull.enabled) {
          screenfull.on('change', () => {
            console.log('1')
            if (!screenfull.isFullscreen) {
              commit('set', false)
            }
          })
        }
        // end
        resolve()
      })
    },

public ngOnInit(): void {
        // @ts-ignore
        this.listener = screenfull.on("change", () => {
            // @ts-ignore
            this.isFullscreen = screenfull.isFullscreen;
        });
        // @ts-ignore
        this.isFullscreen = screenfull.isFullscreen;
    }

useEffect(() => {
    if (!isFullscreen && screenfull.enabled) {
      // Checking for `enabled` here, because our props have probably changed
      // _after_ exiting fullscreen mode (see `handleFullscreenChange`).
      // This way we don't double-exit.
      if (screenfull.isFullscreen) {
        screenfull.exit();
      }
    }
  }, [isFullscreen]);

function updateToolbar() {
    // View options
    $('[data-zen-mode]').toggleClass('enabled', zenMode);
    if(Screenfull.enabled) {
      $('[data-fullscreen]').toggleClass('enabled', Screenfull.isFullscreen);
    }
    $('[data-word-count]').toggleClass('enabled', wordCount);

    // Undo/redo
    $('[data-editor="command:undo"]').prop('disabled', !contentEditor.hasUndo());
    $('[data-editor="command:redo"]').prop('disabled', !contentEditor.hasRedo());

    // Formats
    $('[data-editor^="format:"]').each(function() {
      let format = $(this).attr('data-editor').split(':')[1];
      $(this).toggleClass('enabled', contentEditor.hasFormat(format));
    });

    // Lists
    $('[data-editor="command:toggleOrderedList"]').toggleClass('enabled', contentEditor.isOrderedList());
    $('[data-editor="command:toggleUnorderedList"]').toggleClass('enabled', contentEditor.isUnorderedList());

this.presentation.focus();
      // Setup orbit control.
      const { x, y, z } = this.presentation.getCurrentStep().getPosition();
      this.orbitControl.enabled = true;
      this.orbitControl.target.set(x, y, z);
    } else {
      selectedComponent = undefined;
      this.presentation.blur();
    }

    if (mode === EditorMode.PLAY) {
      this.presentation.play();
      this.orbitControl.enabled = false;
      this.transformControl.enabled = false;
      this.transformControl.detach();
      if (Screenfull) Screenfull.request(this.presentation.domElement);
      this.presentation.resize(window.innerWidth, window.innerHeight);
    } else if (this.state.mode === EditorMode.PLAY) {
      if (Screenfull) Screenfull.exit();
    }

    this.setState({
      mode,
      selectedComponent
    });
  }

export function exitFullScreen() {
    if (typeof document === 'undefined') return /* Build time render by Gatsby. */
    if (!screenfull.enabled) return /* Browser prevents full screen or problem with library. */
    if (screenfull.isFullscreen) {
        screenfull.exit()
    }
}

return new Promise(resolve => {
        if (screenfull.isFullscreen) {
          screenfull.exit()
          commit('set', false)
        } else {
          screenfull.request()
          commit('set', true)
        }
        // end
        resolve()
      })
    }

}

        // Make the menu collapse button
        let menuButton = this.element.appendChild(document.createElement('button'));
        menuButton.className = styles['guify-bar-button'];
        menuButton.innerHTML = 'Controls';
        css(menuButton, {
            left: opts.align == 'left' ? '0' : 'unset',
            right: opts.align == 'left' ? 'unset' : '0',
        })
        menuButton.onclick = () => {
            this.emit('ontogglepanel');
        }

        // Make the fullscreen button
        if (screenfull.isEnabled) {
            let fullscreenButton = this.element.appendChild(document.createElement('button'));
            fullscreenButton.className = styles['guify-bar-button'];
            fullscreenButton.innerHTML = '「　」';
            fullscreenButton.setAttribute('aria-label', 'Toggle Fullscreen');
            css(fullscreenButton, {
                left: opts.align == 'left' ? 'unset' : '0', // Place on opposite side from menuButton
                right: opts.align == 'left' ? '0' : 'unset',
            })
            fullscreenButton.onclick = () => {
                this.emit('onfullscreenrequested');
            }
        }

    }

enterFullscreen(canvas) {
    if (screenfull.enabled) {
      screenfull.request(canvas);
    } else {
      // iOS
      this.__setState(State.PRESENTING_FULLSCREEN);
    }
    return true;
  }

$(document).on('click', '#cr-stage', function () {
  if (screenfull.enabled) {
    screenfull.request($('#theater')[0]);
    $('body').addClass('fullscreen');
    scaleGame();
    document.addEventListener(screenfull.raw.fullscreenchange, function () {
      if (!screenfull.isFullscreen) {
        // exit fullscreen code here
        $('body').removeClass('fullscreen');
        scaleGame();
      }
    });
  }
});