FullScreenPlugin

Defined in: plugins/FullScreenPlugin.ts:69

Cross-browser fullscreen functionality plugin for web applications.

Provides comprehensive fullscreen mode management with automatic browser compatibility handling, event management, and flexible element targeting. Supports all major browsers including Chrome, Firefox, Safari, and Edge.

Key Features:

• Cross-browser fullscreen API compatibility
• Automatic event handling and state synchronization
• Flexible element targeting (container, window, or custom elements)
• Signal-based event system for reactive programming
• Graceful fallback handling for unsupported browsers
• Automatic cleanup and error handling

Example

// Get the fullscreen plugin
const fullscreen = app.plugins.get<IFullScreenPlugin>('fullscreen');

// Listen for fullscreen changes
fullscreen.onFullScreenChange.connect((isFullscreen) => {
  console.log('Fullscreen state:', isFullscreen);
  updateUIForFullscreen(isFullscreen);
});

// Toggle fullscreen mode
document.getElementById('fullscreenBtn').addEventListener('click', () => {
  if (fullscreen.canFullscreen) {
    fullscreen.toggleFullScreen();
  } else {
    console.warn('Fullscreen not supported');
  }
});

// Set custom element for fullscreen
const gameContainer = document.getElementById('gameContainer');
fullscreen.setFullScreenElement(gameContainer);
fullscreen.setFullScreen(true);

Extends

• Plugin

Implements

• IFullScreenPlugin

Constructors

Constructor

new FullScreenPlugin(): FullScreenPlugin

Defined in: plugins/FullScreenPlugin.ts:121

Creates the fullscreen plugin instance. Binds all methods to maintain proper context when used as event handlers.

Returns

FullScreenPlugin

Overrides

Plugin.constructor

Properties

__dill_pixel_method_binding_root

__dill_pixel_method_binding_root: boolean

Defined in: plugins/Plugin.ts:39

Inherited from

Plugin.__dill_pixel_method_binding_root

---

id

readonly id: "fullscreen" = 'fullscreen'

Defined in: plugins/FullScreenPlugin.ts:71

Plugin identifier for framework registration

Implementation of

IFullScreenPlugin.id

Overrides

Plugin.id

---

onFullScreenChange

onFullScreenChange: Signal<(isFullscreen) => void>

Defined in: plugins/FullScreenPlugin.ts:77

Signal emitted when fullscreen state changes. Provides the new fullscreen state as a boolean parameter.

Implementation of

IFullScreenPlugin.onFullScreenChange

Accessors

app

Get Signature

get app(): Application

Defined in: plugins/FullScreenPlugin.ts:130

Gets the application instance.

Returns

Application

The singleton Application instance

Implementation of

IFullScreenPlugin.app

Overrides

Plugin.app

---

canFullscreen

Get Signature

get canFullscreen(): boolean

Defined in: plugins/FullScreenPlugin.ts:259

Checks if the current environment and element support fullscreen functionality.

Example

if (fullscreenPlugin.canFullscreen) {
  // Show fullscreen button
  fullscreenButton.style.display = 'block';
} else {
  // Hide fullscreen button or show alternative
  fullscreenButton.style.display = 'none';
  console.log('Fullscreen not supported on this device');
}

Returns

boolean

True if fullscreen is supported and available

Whether the current environment supports fullscreen functionality

Implementation of

IFullScreenPlugin.canFullscreen

---

fullScreenElement

Get Signature

get fullScreenElement(): null | HTMLElement | Window

Defined in: plugins/FullScreenPlugin.ts:113

Gets the current fullscreen target element.

Returns

null | HTMLElement | Window

The element currently set for fullscreen operations

Set Signature

set fullScreenElement(value): void

Defined in: plugins/FullScreenPlugin.ts:105

Sets the element to be used for fullscreen operations.

Parameters

value

The HTML element or Window object to use for fullscreen

null | HTMLElement | Window

Returns

void

The HTML element or Window object used for fullscreen operations

Implementation of

IFullScreenPlugin.fullScreenElement

---

isFullscreen

Get Signature

get isFullscreen(): boolean

Defined in: plugins/FullScreenPlugin.ts:278

Checks if the document is currently in fullscreen mode. Uses browser-specific properties for cross-browser compatibility.

Returns

boolean

True if any element is currently in fullscreen mode

---

isFullScreen

Get Signature

get isFullScreen(): boolean

Defined in: plugins/FullScreenPlugin.ts:97

Gets the current fullscreen state.

Returns

boolean

True if currently in fullscreen mode

Set Signature

set isFullScreen(value): void

Defined in: plugins/FullScreenPlugin.ts:88

Sets the fullscreen state and triggers the appropriate fullscreen operation.

Parameters

value

boolean

True to enter fullscreen, false to exit

Returns

void

Current fullscreen state

Implementation of

IFullScreenPlugin.isFullScreen

---

options

Get Signature

get options(): O

Defined in: plugins/Plugin.ts:44

Returns

O

Implementation of

IFullScreenPlugin.options

Inherited from

Plugin.options

Methods

addSignalConnection()

addSignalConnection(…args): void

Defined in: plugins/Plugin.ts:79

Add signal connections to the container.

Parameters

args

…SignalConnection[]

The signal connections to add.

Returns

void

Implementation of

IFullScreenPlugin.addSignalConnection

Inherited from

Plugin.addSignalConnection

---

clearSignalConnections()

clearSignalConnections(): void

Defined in: plugins/Plugin.ts:85

Returns

void

Implementation of

IFullScreenPlugin.clearSignalConnections

Inherited from

Plugin.clearSignalConnections

---

destroy()

destroy(): void

Defined in: plugins/FullScreenPlugin.ts:157

Cleans up the plugin by removing all event listeners. Called automatically when the plugin is destroyed.

Returns

void

Implementation of

IFullScreenPlugin.destroy

Overrides

Plugin.destroy

---

initialize()

initialize(): void

Defined in: plugins/FullScreenPlugin.ts:145

Initializes the fullscreen plugin by setting up browser event listeners. Registers listeners for all major browser fullscreen change events.

Returns

void

Example

// Called automatically by the plugin system
// Registers listeners for: fullscreenchange, webkitfullscreenchange,
// mozfullscreenchange, msfullscreenchange

Implementation of

IFullScreenPlugin.initialize

Overrides

Plugin.initialize

---

postInitialize()

postInitialize(_app): void | Promise<void>

Defined in: plugins/Plugin.ts:68

Parameters

_app

IApplication

Returns

void | Promise<void>

Implementation of

IFullScreenPlugin.postInitialize

Inherited from

Plugin.postInitialize

---

setFullScreen()

setFullScreen(value): void

Defined in: plugins/FullScreenPlugin.ts:207

Sets the fullscreen state explicitly

Parameters

value

boolean

True to enter fullscreen, false to exit fullscreen

Returns

void

Example

// Enter fullscreen mode
fullscreenPlugin.setFullScreen(true);

// Exit fullscreen mode
fullscreenPlugin.setFullScreen(false);

// Conditional fullscreen based on game state
if (gameState === 'playing') {
  fullscreenPlugin.setFullScreen(true);
}

Implementation of

IFullScreenPlugin.setFullScreen

---

setFullScreenElement()

setFullScreenElement(value): void

Defined in: plugins/FullScreenPlugin.ts:235

Sets the element to be used for fullscreen operations

Parameters

value

The HTML element or Window to use for fullscreen operations

null | HTMLElement | Window

Returns

void

Example

// Use a specific game container
const gameDiv = document.getElementById('game-container');
fullscreenPlugin.setFullScreenElement(gameDiv);

// Use the entire window
fullscreenPlugin.setFullScreenElement(window);

// Reset to default (application container)
fullscreenPlugin.setFullScreenElement(null);

Implementation of

IFullScreenPlugin.setFullScreenElement

---

toggleFullScreen()

toggleFullScreen(): void

Defined in: plugins/FullScreenPlugin.ts:184

Toggles between fullscreen and windowed mode

Returns

void

Example

// Toggle fullscreen on button click
button.addEventListener('click', () => {
  fullscreenPlugin.toggleFullScreen();
});

// Keyboard shortcut for fullscreen
document.addEventListener('keydown', (e) => {
  if (e.key === 'F11') {
    e.preventDefault();
    fullscreenPlugin.toggleFullScreen();
  }
});

Implementation of

IFullScreenPlugin.toggleFullScreen