Css Zero Showcase
x
1
<button hidden class="btn" data-action="fullscreen#toggle" data-fullscreen-target="button">Enter fullscreen</button>
1
<button hidden class="btn" data-action="fullscreen#toggle" data-fullscreen-target="button">Enter fullscreen</button>
CSS is not required or multiple files are needed, check the notes.
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
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "button" ]
  connect() {
    this.hasButtonTarget && this.#hideButtonIfNotSupported()
  }
  toggle() {
    this.#fullScreenMode ? this.#exitFullscreen() : this.#requestFullscreen()
  }
  #hideButtonIfNotSupported() {
    this.buttonTarget.hidden = !this.#supportsFullScreen
  }
  #exitFullscreen() {
    document.exitFullscreen()
  }
  #requestFullscreen() {
    document.documentElement.requestFullscreen()
  }
  get #supportsFullScreen() {
    return this.element.requestFullscreen
  }
  get #fullScreenMode() {
    return document.fullscreenElement
  }
}

Initialization

<body data-controller="fullscreen">
  <%= yield %>
</body>