Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
screenfull
Advanced tools
screenfull - npm Package Compare versions
Comparing version 4.1.0 to 4.2.0
@@ -1,78 +0,152 @@ | ||
| export type RawEventNames = { | ||
| readonly requestFullscreen: string; | ||
| readonly exitFullscreen: string; | ||
| readonly fullscreenElement: string; | ||
| readonly fullscreenEnabled: string; | ||
| readonly fullscreenchange: string; | ||
| readonly fullscreenerror: string; | ||
| }; | ||
| /// <reference lib="dom"/> | ||
| export type EventName = 'change' | 'error'; | ||
| declare namespace screenfull { | ||
| type RawEventNames = { | ||
| readonly requestFullscreen: string; | ||
| readonly exitFullscreen: string; | ||
| readonly fullscreenElement: string; | ||
| readonly fullscreenEnabled: string; | ||
| readonly fullscreenchange: string; | ||
| readonly fullscreenerror: string; | ||
| }; | ||
| export interface Screenfull { | ||
| /** | ||
| Whether fullscreen is active. | ||
| */ | ||
| readonly isFullscreen: boolean; | ||
| type EventName = 'change' | 'error'; | ||
| /** | ||
| The element currently in fullscreen, otherwise `null`. | ||
| */ | ||
| readonly element: Element | null; | ||
| interface Screenfull { | ||
| /** | ||
| Whether fullscreen is active. | ||
| */ | ||
| readonly isFullscreen: boolean; | ||
| /** | ||
| 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`). | ||
| */ | ||
| readonly enabled: boolean; | ||
| /** | ||
| The element currently in fullscreen, otherwise `null`. | ||
| */ | ||
| readonly element: Element | null; | ||
| /** | ||
| Exposes the raw properties (prefixed if needed) used internally. | ||
| */ | ||
| raw: RawEventNames; | ||
| /** | ||
| 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`). | ||
| /** | ||
| Make an element fullscreen. | ||
| @example | ||
| ``` | ||
| if (screenfull.enabled) { | ||
| screenfull.request(); | ||
| } | ||
| ``` | ||
| */ | ||
| readonly enabled: boolean; | ||
| If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`). | ||
| /** | ||
| Exposes the raw properties (prefixed if needed) used internally. | ||
| */ | ||
| raw: RawEventNames; | ||
| Keep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key. | ||
| /** | ||
| Make an element fullscreen. | ||
| @param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a decendant. | ||
| @returns A promise that resolves after the element enters fullscreen. | ||
| */ | ||
| request(element?: Element): Promise<void>; | ||
| If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`). | ||
| /** | ||
| Brings you out of fullscreen. | ||
| Keep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key. | ||
| @returns A promise that resolves after the element exits fullscreen. | ||
| */ | ||
| exit(): Promise<void>; | ||
| @param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a decendant. | ||
| @returns A promise that resolves after the element enters fullscreen. | ||
| /** | ||
| Requests fullscreen if not active, otherwise exits. | ||
| @example | ||
| ``` | ||
| // Fullscreen the page | ||
| document.getElementById('button').addEventListener('click', () => { | ||
| if (screenfull.enabled) { | ||
| screenfull.request(); | ||
| } else { | ||
| // Ignore or do something else | ||
| } | ||
| }); | ||
| @returns A promise that resolves after the element enters/exits fullscreen. | ||
| */ | ||
| toggle(element?: Element): Promise<void>; | ||
| // Fullscreen an element | ||
| const el = document.getElementById('target'); | ||
| /** | ||
| Add a listener for when the browser switches in and out of fullscreen or when there is an error. | ||
| */ | ||
| on(name: EventName, handler: (event: Event) => void): void; | ||
| document.getElementById('button').addEventListener('click', () => { | ||
| if (screenfull.enabled) { | ||
| screenfull.request(el); | ||
| } | ||
| }); | ||
| /** | ||
| Remove a previously registered event listener. | ||
| */ | ||
| off(name: EventName, handler: (event: Event) => void): void; | ||
| // Fullscreen an element with jQuery | ||
| const target = $('#target')[0]; // Get DOM element from jQuery collection | ||
| /** | ||
| Alias for `.on('change', function)`. | ||
| */ | ||
| onchange(handler: (event: Event) => void): void; | ||
| $('#button').on('click', () => { | ||
| if (screenfull.enabled) { | ||
| screenfull.request(target); | ||
| } | ||
| }); | ||
| ``` | ||
| */ | ||
| request(element?: Element): Promise<void>; | ||
| /** | ||
| Alias for `.on('error', function)`. | ||
| */ | ||
| onerror(handler: (event: Event) => void): 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. | ||
| @returns A promise that resolves after the element enters/exits fullscreen. | ||
| @example | ||
| ``` | ||
| // Toggle fullscreen on a image with jQuery | ||
| $('img').on('click', event => { | ||
| if (screenfull.enabled) { | ||
| screenfull.toggle(event.target); | ||
| } | ||
| }); | ||
| ``` | ||
| */ | ||
| toggle(element?: Element): Promise<void>; | ||
| /** | ||
| Add a listener for when the browser switches in and out of fullscreen or when there is an error. | ||
| @example | ||
| ``` | ||
| // Detect fullscreen change | ||
| if (screenfull.enabled) { | ||
| screenfull.on('change', () => { | ||
| console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No'); | ||
| }); | ||
| } | ||
| // Detect fullscreen error | ||
| if (screenfull.enabled) { | ||
| 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 | ||
| ``` | ||
| 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; | ||
| } | ||
| } | ||
@@ -83,5 +157,10 @@ | ||
| */ | ||
| declare const screenfull: Screenfull | false; | ||
| declare const screenfull: | ||
| | (screenfull.Screenfull & { | ||
| // TODO: remove this in the next major version | ||
| default: typeof screenfull; | ||
| }) | ||
| | false; | ||
| export default screenfull; | ||
| export = screenfull; | ||
| export as namespace screenfull; |
| /*! | ||
| * screenfull | ||
| * v4.1.0 - 2019-03-19 | ||
| * v4.2.0 - 2019-04-01 | ||
| * (c) Sindre Sorhus; MIT License | ||
@@ -184,2 +184,3 @@ */ | ||
| module.exports = screenfull; | ||
| // TODO: remove this in the next major version | ||
| module.exports.default = screenfull; | ||
@@ -186,0 +187,0 @@ } else { |
| { | ||
| "name": "screenfull", | ||
| "version": "4.1.0", | ||
| "version": "4.2.0", | ||
| "description": "Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen.", | ||
@@ -18,3 +18,3 @@ "license": "MIT", | ||
| "pretest": "grunt", | ||
| "test": "xo && tsd-check" | ||
| "test": "xo && tsd" | ||
| }, | ||
@@ -30,8 +30,8 @@ "files": [ | ||
| "devDependencies": { | ||
| "grunt": "^1.0.1", | ||
| "grunt-contrib-concat": "^1.0.0", | ||
| "grunt": "^1.0.4", | ||
| "grunt-contrib-concat": "^1.0.1", | ||
| "grunt-contrib-copy": "^1.0.0", | ||
| "grunt-contrib-uglify": "^4.0.0", | ||
| "grunt-contrib-uglify": "^4.0.1", | ||
| "load-grunt-tasks": "^4.0.0", | ||
| "tsd-check": "^0.5.0", | ||
| "tsd": "^0.7.1", | ||
| "xo": "^0.16.0" | ||
@@ -38,0 +38,0 @@ }, |
@@ -167,3 +167,3 @@ # screenfull.js | ||
| import {Directive, HostListener} from '@angular/core'; | ||
| import * as screenfull from 'screenfull'; | ||
| import screenfull = require('screenfull'); | ||
@@ -170,0 +170,0 @@ @Directive({ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.17%
17369
- Lines of code
- increased by29.06%
302
No dependency changes