• Stars
    star
    436
  • Rank 99,461 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vendor agnostic access to the Fullscreen API

Fscreen - Fullscreen API

npm npm bundle size (version)

Vendor agnostic access to the Fullscreen API. Build with the Fullscreen API as intended without worrying about vendor prefixes.


Live demo app for Fscreen

Code is in the /demo folder.


$ npm install --save fscreen
import fscreen from 'fscreen';

fscreen.fullscreenEnabled === true / false;
// boolean to tell if fullscreen mode is supported
// replacement for: document.fullscreenEnabled
// mapped to: document.vendorMappedFullscreenEnabled

fscreen.fullscreenElement === null / undefined / DOM Element;
// null if not in fullscreen mode, or the DOM element that's in fullscreen mode
// (if fullscreen is not supported by the device it will be undefined)
// replacement for: document.fullscreenElement
// mapped to: document.vendorMappedFullsceenElement
// note that fscreen.fullscreenElement uses a getter to retrieve the element
// each time the property is accessed.


fscreen.requestFullscreen(element);
// replacement for: element.requestFullscreen()
// mapped to: element.vendorMappedRequestFullscreen()

fscreen.requestFullscreenFunction(element);
// replacement for: element.requestFullscreen - without calling the function
// mapped to: element.vendorMappedRequestFullscreen

fscreen.exitFullscreen();
// replacement for: document.exitFullscreen()
// mapped to: document.vendorMappedExitFullscreen()
// note that fscreen.exitFullscreen is mapped to
// document.vendorMappedExitFullscreen - without calling the function


fscreen.onfullscreenchange = handler;
// replacement for: document.onfullscreenchange = handler
// mapped to: document.vendorMappedOnfullscreenchange = handler

fscreen.addEventListener('fullscreenchange', handler, options);
// replacement for: document.addEventListener('fullscreenchange', handler, options)
// mapped to: document.addEventListener('vendorMappedFullscreenchange', handler, options)

fscreen.removeEventListener('fullscreenchange', handler, options);
// replacement for: document.removeEventListener('fullscreenchange', handler, options)
// mapped to: document.removeEventListener('vendorMappedFullscreenchange', handler, options)


fscreen.onfullscreenerror = handler;
// replacement for: document.onfullscreenerror = handler
// mapped to: document.vendorMappedOnfullscreenerror = handler

fscreen.addEventListener('fullscreenerror', handler, options);
// replacement for: document.addEventListener('fullscreenerror', handler, options)
// mapped to: document.addEventListener('vendorMappedFullscreenerror', handler, options)

fscreen.removeEventListener('fullscreenerror', handler, options);
// replacement for: document.removeEventListener('fullscreenerror', handler, options)
// mapped to: document.removeEventListener('vendorMappedFullscreenerror', handler, options)


fscreen.fullscreenPseudoClass;
// returns: the vendorMapped fullscreen Pseudo Class
// i.e. :fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen
// Can be used to find any elements that are fullscreen using the vendorMapped Pseudo Class 
// e.g. document.querySelectorAll(fscreen.fullscreenPseudoClass).forEach(...);

Usage

Use it just like the spec API.

if (fscreen.fullscreenEnabled) {
 fscreen.addEventListener('fullscreenchange', handler, false);
 fscreen.requestFullscreen(element);
}

function handler() {
 if (fscreen.fullscreenElement !== null) {
   console.log('Entered fullscreen mode');
 } else {
   console.log('Exited fullscreen mode');
 }
}

More Repositories

1

spa-github-pages

Host single page apps with GitHub Pages
TypeScript
3,818
star
2

react-router-hash-link

Hash link scroll functionality for React Router
JavaScript
732
star
3

detect-it

Detect if a device is mouseOnly, touchOnly, or hybrid, and if the primary input is mouse or touch.
TypeScript
415
star
4

rollpkg

Zero-config build tool to create packages with Rollup and TypeScript
TypeScript
174
star
5

react-interactive

Better hover, active and focus states than CSS pseudo-classes, and a callback when the interactive state changes.
TypeScript
167
star
6

fractal

Mandelbrot fractal generator - js web app, uses zero libraries
JavaScript
130
star
7

react-github-pages

React with React Router boilerplate for GitHub Pages
JavaScript
49
star
8

detect-passive-events

Detect if the browser supports passive event listeners
TypeScript
39
star
9

event-from

Determine if a browser event was caused by mouse, touch or key input.
TypeScript
21
star
10

react-markdown-tree

Renders markdown as React components and never uses dangerouslySetInnerHTML
JavaScript
15
star
11

the-listener

Easily set complex listeners for mouse, touch and pointer events without conflicts
JavaScript
13
star
12

browserslist-config-css-grid

Browserslist config of all browsers that support css grid
JavaScript
11
star
13

current-input

Detect the current input (mouse or touch) and fix the sticky :hover bug on touch devices.
TypeScript
9
star
14

simplemark

A smaller version of Markdown
JavaScript
9
star
15

detect-touch-events

Detect if the browser has a touch screen and supports the Touch Events API
JavaScript
8
star
16

detect-touch

Detect if a device has a touch interface
JavaScript
5
star
17

detect-pointer-events

Detect if the browser supports the Pointer Events API
JavaScript
5
star
18

react-fast-mount

Fast mount slow loading React components
JavaScript
5
star
19

react-simplemark

React component and renderer for Simplemark
JavaScript
4
star
20

four-corner-layout

Design concept for four presentation pages on a single web page
JavaScript
4
star
21

device-responsive-apps

Device responsive apps presentation
JavaScript
3
star
22

sticky-hover

Fixing the sticky hover problem on mobile
JavaScript
3
star
23

rollpkg-example-package

Example package for Rollpkg
TypeScript
3
star
24

polymorphic-as-prop-api

Polymorphic as prop api standard proof of concept. Brings composability to the polymorphic as prop.
TypeScript
3
star
25

react-markdown-tree-config-default

Default Config for React Markdown Tree
JavaScript
3
star
26

detect-hover

JavaScript wrapper for hover and any-hover media queries
JavaScript
2
star
27

flux-async-dispatcher

Asynchronous app dispatcher for Flux design pattern with React
JavaScript
2
star
28

detect-it-v1-demo

JavaScript
1
star
29

detect-it-v3-demo

JavaScript
1
star
30

detect-pointer

JavaScript wrapper for pointer and any-pointer media queries
JavaScript
1
star
31

interactive-style-options

Created with CodeSandbox
TypeScript
1
star
32

test-exports

JavaScript
1
star
33

react-interactive-v0-demo

Demo app fro React Interactive v0
JavaScript
1
star
34

randompage

HTML
1
star
35

react-component-dev

Minimal boilerplate for developing and demonstrating a React component
JavaScript
1
star