useFullscreen

Purpose

Returns

Usage

useFullscreen

Parameters		Type	Purpose	Default
controller		Controller	The instance of the controller to install the behaviour on. This allows the mixin to automatically register cleanup on the controller's disconnect.	this
element		Window or Document or HTMLElement	The element to open in fullscreen	Document

Return values		Type	Purpose
isFullscreen		Function	A function that returns whether or not the element is currently in fullscreen
enter		Function	A function that when called enters fullscreen
exit		Function	A function that when called exits fullscreen
toggle		Function	A function that enters fullscreen if not already in fullscreen and exits if already in fullscreen

How to Use

import {Controller} from '@hotwired/stimulus';
import {useFullscreen} from 'stimulus-library';

export default class extends Controller {
  connect() {
    // Retrieve the fullscreen functions, where the whole page will be fullscreened
    let {isFullscreen, enter, exit, toggle} = useFullscreen(this)

    // Retrieve the fullscreen functions, where the controller's element will be fullscreened
    let {isFullscreen, enter, exit, toggle} = useFullscreen(this, this.element)

    // Retrieve the fullscreen functions, where the controller's videoTarget element will be fullscreened
    let {isFullscreen, enter, exit, toggle} = useFullscreen(this, this.videoTarget)

    this.isFullscreen = isFullscreen;
    this.enterFullscreen = enter;
    this.exitFullscreen = exit;
  }

  someMethod() {
    this.enterFullscreen();
  }

  somewhereElse() {
    if (this.isFullscreen()){
      this.exitFullscreen()
    }
  }
}