# Fullscreen Plugin

The FullScreen plugin toggles the browser’s native fullscreen mode.

##### Usage

This plugin is activated via data attributes.

Data API

Add `data-lte-toggle="fullscreen"` to a button element. Use `data-lte-icon="maximize"` and `data-lte-icon="minimize"` on child icon elements to toggle their visibility.

    <button type="button" class="btn" data-lte-toggle="fullscreen">
      <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
      <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
    </button>

##### Events

Event | Description
--- | ---
`maximized.lte.fullscreen` | Fired when entering fullscreen mode.
`minimized.lte.fullscreen` | Fired when exiting fullscreen mode.

##### Programmatic API

    import { FullScreen } from "admin-lte"

    const btn = document.querySelector('[data-lte-toggle="fullscreen"]')
    const fs = new FullScreen(btn)

    fs.toggleFullScreen()  // enter or exit based on current state
    fs.inFullScreen()      // request fullscreen
    fs.outFullscreen()     // exit fullscreen

###### Methods

Method | Returns | Description
--- | --- | ---
`toggleFullScreen()` | `void` | Calls `inFullScreen()` if not in fullscreen, otherwise `outFullscreen()`. Checks `document.fullscreenEnabled` first.
`inFullScreen()` | `void` | Calls `document.documentElement.requestFullscreen()`. The icon `.d-none` toggle and `maximized.lte.fullscreen` event are driven by the resulting `fullscreenchange` event, so a denied request leaves the UI untouched.
`outFullscreen()` | `void` | Calls `document.exitFullscreen()`. The icon `.d-none` toggle and `minimized.lte.fullscreen` event are driven by the resulting `fullscreenchange` event.

The constructor takes no config — pass only the trigger element.

##### Notes

- Requires browser support for the Fullscreen API. Check `document.fullscreenEnabled` before invoking.
- Icon state and events are synced from the native `fullscreenchange` event, so they stay correct when the user exits fullscreen with `ESC` or `F11`, and a request denied by the browser leaves the icons unchanged.
- The maximize icon is hidden via the `d-none` Bootstrap utility class (not inline `display`) so it doesn’t override the icon library’s natural display value — this works correctly with FontAwesome, Lucide, Tabler Icons, etc.
- Fullscreen on `document.documentElement` (i.e. `<html>`) means the entire page goes fullscreen. To fullscreen just a card, use the CardWidget `maximize()` method instead.