UNPKG

@cradokski/fullscreen

Version:

An Angular service that toggles the browser between Fullscreen and normal view. Includes optional **double-tap support** to prevent accidental toggling — useful on mobile/touch devices.

70 lines (52 loc) 1.94 kB
# 📺 Fullscreen Service for Angular An Angular service that toggles the browser between Fullscreen and normal view. Includes optional **double-tap support** to prevent accidental toggling useful on mobile/touch devices. --- ## ✨ Features - 🆕 Optional **double-tap toggle** to reduce accidental activation - Single-tap toggle by default - Works on any element or the entire document - Minimal API - No dependencies, framework-native - Small footprint --- ## 🚀 Usage ### ✅ Basic Example **app.component.ts** ```ts import { FullScreenService } from '@cradokski/fullscreen'; ... constructor(public fsService: FullScreenService) ... ``` **app.component.html** ```html <button class="fs-toggle" (click)="fsService.browserFsToggle({requireDoubleTap: true})"> Double Click Toggle </button> <div class="fs-status"> {{fsService.isFullscreenActive() ? 'Fullscreen' : 'Normal'}} </div> ``` ## 📘 API Reference ### 1. **browserFsToggle(options?)** ```ts browserFsToggle(options?: { requireDoubleTap?: boolean; delayMs?: number; }): boolean ``` | Option | Type | Default | Description | | ------------------ | --------- | ------- | ----------------------------------------------------------------------- | | `requireDoubleTap` | `boolean` | `false` | If `true`, user must call this method twice within `delayMs` to toggle. | | `delayMs` | `number` | `300` | Max time (in ms) between two taps to count as a double-tap. | #### &nbsp;&nbsp;&nbsp; **Returns:** true if fullscreen is now active, false otherwise. ### 2. **isFullscreenActive()** ```ts isFullscreenActive(): boolean ``` #### &nbsp;&nbsp;&nbsp; **Returns:** true if fullscreen is now active, false otherwise. --- <p> 📦 Angular Compatibility - built with Angular CLI v18.2.0. Compatible with Angular v16+ </p>