@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
Markdown
# 📺 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. |
#### **Returns:** true if fullscreen is now active, false otherwise.
### 2. **isFullscreenActive()**
```ts
isFullscreenActive(): boolean
```
#### **Returns:** true if fullscreen is now active, false otherwise.
<p>
📦 Angular Compatibility - built with Angular CLI v18.2.0. Compatible with Angular v16+
</p>