-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cb7baeb
commit cb4c5ab
Showing
4 changed files
with
647 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,175 @@ | ||
export type RawEventNames = { | ||
readonly requestFullscreen: string; | ||
readonly exitFullscreen: string; | ||
readonly fullscreenElement: string; | ||
readonly fullscreenEnabled: string; | ||
readonly fullscreenchange: string; | ||
readonly fullscreenerror: string; | ||
}; | ||
|
||
export type EventName = 'change' | 'error'; | ||
|
||
/** | ||
Simple wrapper for cross-browser usage of the JavaScript [Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode), which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to. | ||
*/ | ||
declare const screenfull: { | ||
/** | ||
Whether fullscreen is active. | ||
*/ | ||
readonly isFullscreen: boolean; | ||
|
||
/** | ||
The element currently in fullscreen, otherwise `undefined`. | ||
*/ | ||
readonly element: Element | undefined; | ||
|
||
/** | ||
Whether you are allowed to enter fullscreen. If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`). | ||
@example | ||
``` | ||
import screenfull from 'screenfull'; | ||
if (screenfull.isEnabled) { | ||
screenfull.request(); | ||
} | ||
``` | ||
*/ | ||
readonly isEnabled: boolean; | ||
|
||
/** | ||
Exposes the raw properties (prefixed if needed) used internally. | ||
*/ | ||
raw: RawEventNames; | ||
|
||
/** | ||
Make an element fullscreen. | ||
If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`). | ||
Keep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key. | ||
@param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a descendant. | ||
@param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions). | ||
@returns A promise that resolves after the element enters fullscreen. | ||
@example | ||
``` | ||
import screenfull from 'screenfull'; | ||
// Fullscreen the page | ||
document.getElementById('button').addEventListener('click', () => { | ||
if (screenfull.isEnabled) { | ||
screenfull.request(); | ||
} else { | ||
// Ignore or do something else | ||
} | ||
}); | ||
// Fullscreen an element | ||
const element = document.getElementById('target'); | ||
document.getElementById('button').addEventListener('click', () => { | ||
if (screenfull.isEnabled) { | ||
screenfull.request(element); | ||
} | ||
}); | ||
// Fullscreen an element with options | ||
const element = document.getElementById('target'); | ||
document.getElementById('button').addEventListener('click', () => { | ||
if (screenfull.isEnabled) { | ||
screenfull.request(element, {navigationUI: 'hide'}); | ||
} | ||
}); | ||
// Fullscreen an element with jQuery | ||
const element = $('#target')[0]; // Get DOM element from jQuery collection | ||
$('#button').on('click', () => { | ||
if (screenfull.isEnabled) { | ||
screenfull.request(element); | ||
} | ||
}); | ||
``` | ||
*/ | ||
request(element?: Element, options?: FullscreenOptions): Promise<void>; | ||
|
||
/** | ||
Brings you out of fullscreen. | ||
@returns A promise that resolves after the element exits fullscreen. | ||
*/ | ||
exit(): Promise<void>; | ||
|
||
/** | ||
Requests fullscreen if not active, otherwise exits. | ||
@param element - The default is `<html>`. If called with another element than the currently active, it will switch to that if it's a descendant. | ||
@param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions). | ||
@returns A promise that resolves after the element enters/exits fullscreen. | ||
@example | ||
``` | ||
import screenfull from 'screenfull'; | ||
// Toggle fullscreen on a image with jQuery | ||
$('img').on('click', event => { | ||
if (screenfull.isEnabled) { | ||
screenfull.toggle(event.target); | ||
} | ||
}); | ||
``` | ||
*/ | ||
toggle(element?: Element, options?: FullscreenOptions): Promise<void>; | ||
|
||
/** | ||
Add a listener for when the browser switches in and out of fullscreen or when there is an error. | ||
@example | ||
``` | ||
import screenfull from 'screenfull'; | ||
// Detect fullscreen change | ||
if (screenfull.isEnabled) { | ||
screenfull.on('change', () => { | ||
console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No'); | ||
}); | ||
} | ||
// Detect fullscreen error | ||
if (screenfull.isEnabled) { | ||
screenfull.on('error', event => { | ||
console.error('Failed to enable fullscreen', event); | ||
}); | ||
} | ||
``` | ||
*/ | ||
on(name: EventName, handler: (event: Event) => void): void; | ||
|
||
/** | ||
Remove a previously registered event listener. | ||
@example | ||
``` | ||
import screenfull from 'screenfull'; | ||
screenfull.off('change', callback); | ||
``` | ||
*/ | ||
off(name: EventName, handler: (event: Event) => void): void; | ||
|
||
/** | ||
Alias for `.on('change', function)`. | ||
*/ | ||
onchange(handler: (event: Event) => void): void; | ||
|
||
/** | ||
Alias for `.on('error', function)`. | ||
*/ | ||
onerror(handler: (event: Event) => void): void; | ||
}; | ||
|
||
export default screenfull; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,160 @@ | ||
/* eslint-disable promise/prefer-await-to-then */ | ||
|
||
const methodMap = [ | ||
[ | ||
'requestFullscreen', | ||
'exitFullscreen', | ||
'fullscreenElement', | ||
'fullscreenEnabled', | ||
'fullscreenchange', | ||
'fullscreenerror', | ||
], | ||
// New WebKit | ||
[ | ||
'webkitRequestFullscreen', | ||
'webkitExitFullscreen', | ||
'webkitFullscreenElement', | ||
'webkitFullscreenEnabled', | ||
'webkitfullscreenchange', | ||
'webkitfullscreenerror', | ||
|
||
], | ||
// Old WebKit | ||
[ | ||
'webkitRequestFullScreen', | ||
'webkitCancelFullScreen', | ||
'webkitCurrentFullScreenElement', | ||
'webkitCancelFullScreen', | ||
'webkitfullscreenchange', | ||
'webkitfullscreenerror', | ||
|
||
], | ||
[ | ||
'mozRequestFullScreen', | ||
'mozCancelFullScreen', | ||
'mozFullScreenElement', | ||
'mozFullScreenEnabled', | ||
'mozfullscreenchange', | ||
'mozfullscreenerror', | ||
], | ||
[ | ||
'msRequestFullscreen', | ||
'msExitFullscreen', | ||
'msFullscreenElement', | ||
'msFullscreenEnabled', | ||
'MSFullscreenChange', | ||
'MSFullscreenError', | ||
], | ||
]; | ||
|
||
const nativeAPI = (() => { | ||
if (typeof document === 'undefined') { | ||
return false; | ||
} | ||
|
||
const unprefixedMethods = methodMap[0]; | ||
const returnValue = {}; | ||
|
||
for (const methodList of methodMap) { | ||
const exitFullscreenMethod = methodList?.[1]; | ||
if (exitFullscreenMethod in document) { | ||
for (const [index, method] of methodList.entries()) { | ||
returnValue[unprefixedMethods[index]] = method; | ||
} | ||
|
||
return returnValue; | ||
} | ||
} | ||
|
||
return false; | ||
})(); | ||
|
||
const eventNameMap = { | ||
change: nativeAPI.fullscreenchange, | ||
error: nativeAPI.fullscreenerror, | ||
}; | ||
|
||
// eslint-disable-next-line import/no-mutable-exports | ||
let screenfull = { | ||
// eslint-disable-next-line default-param-last | ||
request(element = document.documentElement, options) { | ||
return new Promise((resolve, reject) => { | ||
const onFullScreenEntered = () => { | ||
screenfull.off('change', onFullScreenEntered); | ||
resolve(); | ||
}; | ||
|
||
screenfull.on('change', onFullScreenEntered); | ||
|
||
const returnPromise = element[nativeAPI.requestFullscreen](options); | ||
|
||
if (returnPromise instanceof Promise) { | ||
returnPromise.then(onFullScreenEntered).catch(reject); | ||
} | ||
}); | ||
}, | ||
exit() { | ||
return new Promise((resolve, reject) => { | ||
if (!screenfull.isFullscreen) { | ||
resolve(); | ||
return; | ||
} | ||
|
||
const onFullScreenExit = () => { | ||
screenfull.off('change', onFullScreenExit); | ||
resolve(); | ||
}; | ||
|
||
screenfull.on('change', onFullScreenExit); | ||
|
||
const returnPromise = document[nativeAPI.exitFullscreen](); | ||
|
||
if (returnPromise instanceof Promise) { | ||
returnPromise.then(onFullScreenExit).catch(reject); | ||
} | ||
}); | ||
}, | ||
toggle(element, options) { | ||
return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options); | ||
}, | ||
onchange(callback) { | ||
screenfull.on('change', callback); | ||
}, | ||
onerror(callback) { | ||
screenfull.on('error', callback); | ||
}, | ||
on(event, callback) { | ||
const eventName = eventNameMap[event]; | ||
if (eventName) { | ||
document.addEventListener(eventName, callback, false); | ||
} | ||
}, | ||
off(event, callback) { | ||
const eventName = eventNameMap[event]; | ||
if (eventName) { | ||
document.removeEventListener(eventName, callback, false); | ||
} | ||
}, | ||
raw: nativeAPI, | ||
}; | ||
|
||
Object.defineProperties(screenfull, { | ||
isFullscreen: { | ||
get: () => Boolean(document[nativeAPI.fullscreenElement]), | ||
}, | ||
element: { | ||
enumerable: true, | ||
get: () => document[nativeAPI.fullscreenElement] ?? undefined, | ||
}, | ||
isEnabled: { | ||
enumerable: true, | ||
// Coerce to boolean in case of old WebKit. | ||
get: () => Boolean(document[nativeAPI.fullscreenEnabled]), | ||
}, | ||
}); | ||
|
||
if (!nativeAPI) { | ||
screenfull = {isEnabled: false}; | ||
} | ||
|
||
export default screenfull; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
MIT License | ||
|
||
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com) | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
Oops, something went wrong.