Fullscreen

Integrates FullscreenX.js, a zero-dependency, promise-based fullscreen library for modern browsers. Provides automatic CDN fallback when library isn't installed locally. Works with any HTML element.

Features

Basic Functionality:

• Seamlessly integrates FullscreenX.js library into Drupal
• Automatic detection and loading of local or CDN-hosted library
• Zero configuration required for basic usage
• Cross-browser fullscreen API with vendor prefix auto-detection

Unique Features:

• Dual loading strategy: Automatically falls back to CDN (jsDelivr) if local library is not found
• Promise-based API: Modern async/await support for all fullscreen operations
• Smart element targeting: Use CSS selectors or DOM elements directly
• Event system: Listen to fullscreen state changes (enter, exit, change, error)
• Tiny footprint: Only 2.2KB minified library size
• TypeScript support: Full type definitions for enhanced development experience

Use Cases:

• Video players requiring fullscreen playback
• Image galleries and lightboxes
• Presentations and slideshows
• Interactive dashboards and data visualizations
• Gaming interfaces
• Document viewers and readers
• Any content that benefits from distraction-free viewing

Post-Installation

Once installed and enabled, the module automatically loads FullscreenX.js on all pages. No configuration required!

Basic Usage:

1. The library is immediately available as FullscreenX global object
2. Add fullscreen functionality to your custom JavaScript:

// Enter fullscreen
FullscreenX.request('#my-element');

// Exit fullscreen
FullscreenX.exit();

// Toggle fullscreen
FullscreenX.toggle('#video-player');

// Listen to events
FullscreenX.on('enter', () => console.log('Entered fullscreen'));
FullscreenX.on('exit', () => console.log('Exited fullscreen'));

Integration Points:

• Custom module JavaScript files
• Theme JavaScript files
• Inline scripts (not recommended)
• Drupal behaviors for AJAX compatibility

No Configuration Pages: This module works out-of-the-box with zero configuration. Simply enable and start using the FullscreenX API in your JavaScript code.

Optional but Recommended:

• FullscreenX.js library (v1.0.0) installed locally at /libraries/FullscreenX/dist/fullscreenx.min.js
• Download from: GitHub Release v1.0.0

If the library is not installed locally, the module automatically loads it from jsDelivr CDN.

Recommended modules/libraries

• Libraries API: Provides a common repository for external libraries
• Advanced CSS/JS Aggregation: Optimizes loading of JavaScript assets
• Video Embed Field: Works great with fullscreen for embedded videos
• Colorbox: Can be enhanced with fullscreen capabilities
• Photoswipe: Gallery module that can benefit from fullscreen integration

What differentiates Fullscreen module:

• Zero dependencies (no jQuery required)
• Smallest footprint (3.70KB)
• Automatic CDN fallback
• Promise-based modern API
• TypeScript support out of the box

Supporting this Module

Ways to contribute:

• Report issues on the issue queue
• Submit patches and improvements
• Write documentation and tutorials
• Star the FullscreenX library on GitHub

Community Documentation

• Library Documentation: FullscreenX README
• Live Demo: Interactive FullscreenX Demo
• API Reference: Complete API Documentation
• NPM Package: fullscreenx on npm
• CDN Stats: jsDelivr CDN Statistics

Quick Start Example

// Basic implementation in Drupal
(function (Drupal, FullscreenX) {
  'use strict';
  
  Drupal.behaviors.myFullscreen = {
    attach: function (context, settings) {
      // Make all videos fullscreen-capable
      once('fullscreen-video', '.video-wrapper', context).forEach(function(element) {
        element.addEventListener('dblclick', function() {
          FullscreenX.toggle(element);
        });
      });
    }
  };
})(Drupal, FullscreenX);

Browser Support Matrix