Merge pull request #33390 from BendingBender/screenfull

[screenfull] Update types to v4.0
This commit is contained in:
Jesse Trinity
2019-02-28 13:20:07 -08:00
committed by GitHub
8 changed files with 375 additions and 212 deletions

View File

@@ -1,36 +1,85 @@
// Type definitions for screenfull.js 3.3.3
// Type definitions for screenfull.js 4.0
// Project: https://github.com/sindresorhus/screenfull.js
// Definitions by: Ilia Choly <https://github.com/icholy>
// lionelb <https://github.com/lionelb>
// Joel Shepherd <https://github.com/joelshepherd>
// BendingBender <https://github.com/BendingBender>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.5
declare var screenfull: IScreenfull | false;
interface IScreenfullRaw {
requestFullscreen?: string;
exitFullscreen?: string;
fullscreenElement?: string;
fullscreenEnabled?: string;
fullscreenchange?: string;
fullscreenerror?: string;
}
interface IScreenfull {
isFullscreen: boolean;
element: Element;
enabled: boolean;
raw: IScreenfullRaw;
request(elem?: Element): void;
toggle(elem?: Element): void;
exit(): void;
onchange(handler: () => void): void;
onerror(handler: (event: Event) => void): void;
on(name: EventNameMap, handler: (event: Event) => void): void;
off(name: EventNameMap, handler: (event: Event) => void): void;
}
type EventNameMap = 'change' | 'error';
export = screenfull;
export as namespace screenfull;
declare const screenfull: screenfull.Screenfull | false;
declare namespace screenfull {
interface Screenfull {
/**
* Returns a boolean whether fullscreen is active.
*/
readonly isFullscreen: boolean;
/**
* Returns the element currently in fullscreen, otherwise `null`.
*/
readonly element: Element | null;
/**
* Returns a 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;
/**
* 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 decendant.
* @returns A promise that resolves after the element enters fullscreen.
*/
request(element?: Element): 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.
* @returns A promise that resolves after the element enters/exits fullscreen.
*/
toggle(elem?: Element): Promise<void>;
/**
* 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;
/**
* Remove a previously registered event listener.
*/
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;
}
interface RawEventNames {
requestFullscreen: string;
exitFullscreen: string;
fullscreenElement: string;
fullscreenEnabled: string;
fullscreenchange: string;
fullscreenerror: string;
}
type EventName = 'change' | 'error';
}

View File

@@ -1,112 +1,46 @@
import screenfull = require('screenfull');
function test_fullscreen_page() {
if (screenfull && screenfull.enabled) {
screenfull.request();
}
}
if (screenfull) {
screenfull.enabled; // $ExpectType boolean
screenfull.enabled = false; // $ExpectError
screenfull.isFullscreen; // $ExpectType boolean
screenfull.isFullscreen = false; // $ExpectError
screenfull.element; // $ExpectType Element | null
screenfull.element = document.documentElement; // $ExpectError
function test_fullscreen_element() {
var elem = document.getElementById('target');
if (screenfull && screenfull.enabled) {
screenfull.request(elem);
}
}
if (screenfull.enabled) {
const elem: Element = document.getElementById('target')!;
function test_toggle() {
var elem = document.getElementById('target');
if (screenfull && screenfull.enabled) {
screenfull.toggle(elem);
}
}
screenfull.request(); // $ExpectType Promise<void>
screenfull.request(elem); // $ExpectType Promise<void>
screenfull.toggle(); // $ExpectType Promise<void>
screenfull.toggle(elem); // $ExpectType Promise<void>
screenfull.exit(); // $ExpectType Promise<void>
function test_exit() {
if (screenfull && screenfull.enabled) {
screenfull.request();
}
document.getElementById('target').addEventListener('click', function () {
if (screenfull && screenfull.enabled) {
screenfull.exit();
screenfull.on('change', event => {
event; // $ExpectType Event
});
screenfull.on('error', event => {
event; // $ExpectType Event
});
screenfull.off('change', event => {
event; // $ExpectType Event
});
screenfull.off('error', event => {
event; // $ExpectType Event
});
screenfull.onchange(event => {
event; // $ExpectType Event
});
screenfull.onerror(event => {
event; // $ExpectType Event
});
screenfull.raw.requestFullscreen; // $ExpectType string
screenfull.raw.exitFullscreen; // $ExpectType string
screenfull.raw.fullscreenElement; // $ExpectType string
screenfull.raw.fullscreenEnabled; // $ExpectType string
screenfull.raw.fullscreenchange; // $ExpectType string
screenfull.raw.fullscreenerror; // $ExpectType string
}
})
}
function test_raw_detect_change() {
if (screenfull && screenfull.enabled) {
document.addEventListener(screenfull.raw.fullscreenchange, function () {
if (screenfull && screenfull.isFullscreen) {
console.log('fullscreen');
} else {
console.log('not fullscreen');
}
});
}
}
function test_raw_error() {
if (screenfull && screenfull.enabled) {
document.addEventListener(screenfull.raw.fullscreenerror, function (event) {
console.error('Failed to enable fullscreen', event);
});
}
}
function test_detect_change() {
if (screenfull && screenfull.enabled) {
screenfull.onchange(function () {
if (screenfull && screenfull.isFullscreen) {
console.log('fullscreen');
} else {
console.log('not fullscreen');
}
});
}
}
function test_detect_error() {
if (screenfull && screenfull.enabled) {
screenfull.onerror(function (event) {
console.error('Failed to enable fullscreen', event);
});
}
}
function test_listener_on() {
if (screenfull && screenfull.enabled) {
screenfull.on('change', function () {
if (screenfull && screenfull.isFullscreen) {
console.log('fullscreen');
} else {
console.log('not fullscreen');
}
});
screenfull.on('error', function (event) {
console.error('Failed to enable fullscreen', event);
})
}
}
function test_listener_off() {
if (screenfull && screenfull.enabled) {
screenfull.off('change', function () {
if (screenfull && screenfull.isFullscreen) {
console.log('fullscreen');
} else {
console.log('not fullscreen');
}
});
screenfull.off('error', function (event) {
console.error('Failed to enable fullscreen', event);
})
}
}
function test_access_element() {
var elem = document.getElementById('target');
if (screenfull && screenfull.enabled) {
screenfull.request(elem);
if (elem !== screenfull.element) {
alert('incorrect element property');
}
}
}

View File

@@ -7,7 +7,7 @@
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": false,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"typeRoots": [
@@ -21,4 +21,4 @@
"index.d.ts",
"screenfull-tests.ts"
]
}
}

View File

@@ -1,79 +1,3 @@
{
"extends": "dtslint/dt.json",
"rules": {
"adjacent-overload-signatures": false,
"array-type": false,
"arrow-return-shorthand": false,
"ban-types": false,
"callable-types": false,
"comment-format": false,
"dt-header": false,
"eofline": false,
"export-just-namespace": false,
"import-spacing": false,
"interface-name": false,
"interface-over-type-literal": false,
"jsdoc-format": false,
"max-line-length": false,
"member-access": false,
"new-parens": false,
"no-any-union": false,
"no-boolean-literal-compare": false,
"no-conditional-assignment": false,
"no-consecutive-blank-lines": false,
"no-construct": false,
"no-declare-current-package": false,
"no-duplicate-imports": false,
"no-duplicate-variable": false,
"no-empty-interface": false,
"no-for-in-array": false,
"no-inferrable-types": false,
"no-internal-module": false,
"no-irregular-whitespace": false,
"no-mergeable-namespace": false,
"no-misused-new": false,
"no-namespace": false,
"no-object-literal-type-assertion": false,
"no-padding": false,
"no-redundant-jsdoc": false,
"no-redundant-jsdoc-2": false,
"no-redundant-undefined": false,
"no-reference-import": false,
"no-relative-import-in-test": false,
"no-self-import": false,
"no-single-declare-module": false,
"no-string-throw": false,
"no-unnecessary-callback-wrapper": false,
"no-unnecessary-class": false,
"no-unnecessary-generics": false,
"no-unnecessary-qualifier": false,
"no-unnecessary-type-assertion": false,
"no-useless-files": false,
"no-var-keyword": false,
"no-var-requires": false,
"no-void-expression": false,
"no-trailing-whitespace": false,
"object-literal-key-quotes": false,
"object-literal-shorthand": false,
"one-line": false,
"one-variable-per-declaration": false,
"only-arrow-functions": false,
"prefer-conditional-expression": false,
"prefer-const": false,
"prefer-declare-function": false,
"prefer-for-of": false,
"prefer-method-signature": false,
"prefer-template": false,
"radix": false,
"semicolon": false,
"space-before-function-paren": false,
"space-within-parens": false,
"strict-export-declare-modifiers": false,
"trim-file": false,
"triple-equals": false,
"typedef-whitespace": false,
"unified-signatures": false,
"void-return": false,
"whitespace": false
}
"extends": "dtslint/dt.json"
}

36
types/screenfull/v3/index.d.ts vendored Normal file
View File

@@ -0,0 +1,36 @@
// Type definitions for screenfull.js 3.3.3
// Project: https://github.com/sindresorhus/screenfull.js
// Definitions by: Ilia Choly <https://github.com/icholy>
// lionelb <https://github.com/lionelb>
// Joel Shepherd <https://github.com/joelshepherd>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.5
declare var screenfull: IScreenfull | false;
interface IScreenfullRaw {
requestFullscreen?: string;
exitFullscreen?: string;
fullscreenElement?: string;
fullscreenEnabled?: string;
fullscreenchange?: string;
fullscreenerror?: string;
}
interface IScreenfull {
isFullscreen: boolean;
element: Element;
enabled: boolean;
raw: IScreenfullRaw;
request(elem?: Element): void;
toggle(elem?: Element): void;
exit(): void;
onchange(handler: () => void): void;
onerror(handler: (event: Event) => void): void;
on(name: EventNameMap, handler: (event: Event) => void): void;
off(name: EventNameMap, handler: (event: Event) => void): void;
}
type EventNameMap = 'change' | 'error';
export = screenfull;

View File

@@ -0,0 +1,112 @@
import screenfull = require('screenfull');
function test_fullscreen_page() {
if (screenfull && screenfull.enabled) {
screenfull.request();
}
}
function test_fullscreen_element() {
var elem = document.getElementById('target');
if (screenfull && screenfull.enabled) {
screenfull.request(elem);
}
}
function test_toggle() {
var elem = document.getElementById('target');
if (screenfull && screenfull.enabled) {
screenfull.toggle(elem);
}
}
function test_exit() {
if (screenfull && screenfull.enabled) {
screenfull.request();
}
document.getElementById('target').addEventListener('click', function () {
if (screenfull && screenfull.enabled) {
screenfull.exit();
}
})
}
function test_raw_detect_change() {
if (screenfull && screenfull.enabled) {
document.addEventListener(screenfull.raw.fullscreenchange, function () {
if (screenfull && screenfull.isFullscreen) {
console.log('fullscreen');
} else {
console.log('not fullscreen');
}
});
}
}
function test_raw_error() {
if (screenfull && screenfull.enabled) {
document.addEventListener(screenfull.raw.fullscreenerror, function (event) {
console.error('Failed to enable fullscreen', event);
});
}
}
function test_detect_change() {
if (screenfull && screenfull.enabled) {
screenfull.onchange(function () {
if (screenfull && screenfull.isFullscreen) {
console.log('fullscreen');
} else {
console.log('not fullscreen');
}
});
}
}
function test_detect_error() {
if (screenfull && screenfull.enabled) {
screenfull.onerror(function (event) {
console.error('Failed to enable fullscreen', event);
});
}
}
function test_listener_on() {
if (screenfull && screenfull.enabled) {
screenfull.on('change', function () {
if (screenfull && screenfull.isFullscreen) {
console.log('fullscreen');
} else {
console.log('not fullscreen');
}
});
screenfull.on('error', function (event) {
console.error('Failed to enable fullscreen', event);
})
}
}
function test_listener_off() {
if (screenfull && screenfull.enabled) {
screenfull.off('change', function () {
if (screenfull && screenfull.isFullscreen) {
console.log('fullscreen');
} else {
console.log('not fullscreen');
}
});
screenfull.off('error', function (event) {
console.error('Failed to enable fullscreen', event);
})
}
}
function test_access_element() {
var elem = document.getElementById('target');
if (screenfull && screenfull.enabled) {
screenfull.request(elem);
if (elem !== screenfull.element) {
alert('incorrect element property');
}
}
}

View File

@@ -0,0 +1,29 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": false,
"strictFunctionTypes": true,
"baseUrl": "../../",
"typeRoots": [
"../../"
],
"paths": {
"screenfull": [
"screenfull/v3"
]
},
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"files": [
"index.d.ts",
"screenfull-tests.ts"
]
}

View File

@@ -0,0 +1,79 @@
{
"extends": "dtslint/dt.json",
"rules": {
"adjacent-overload-signatures": false,
"array-type": false,
"arrow-return-shorthand": false,
"ban-types": false,
"callable-types": false,
"comment-format": false,
"dt-header": false,
"eofline": false,
"export-just-namespace": false,
"import-spacing": false,
"interface-name": false,
"interface-over-type-literal": false,
"jsdoc-format": false,
"max-line-length": false,
"member-access": false,
"new-parens": false,
"no-any-union": false,
"no-boolean-literal-compare": false,
"no-conditional-assignment": false,
"no-consecutive-blank-lines": false,
"no-construct": false,
"no-declare-current-package": false,
"no-duplicate-imports": false,
"no-duplicate-variable": false,
"no-empty-interface": false,
"no-for-in-array": false,
"no-inferrable-types": false,
"no-internal-module": false,
"no-irregular-whitespace": false,
"no-mergeable-namespace": false,
"no-misused-new": false,
"no-namespace": false,
"no-object-literal-type-assertion": false,
"no-padding": false,
"no-redundant-jsdoc": false,
"no-redundant-jsdoc-2": false,
"no-redundant-undefined": false,
"no-reference-import": false,
"no-relative-import-in-test": false,
"no-self-import": false,
"no-single-declare-module": false,
"no-string-throw": false,
"no-unnecessary-callback-wrapper": false,
"no-unnecessary-class": false,
"no-unnecessary-generics": false,
"no-unnecessary-qualifier": false,
"no-unnecessary-type-assertion": false,
"no-useless-files": false,
"no-var-keyword": false,
"no-var-requires": false,
"no-void-expression": false,
"no-trailing-whitespace": false,
"object-literal-key-quotes": false,
"object-literal-shorthand": false,
"one-line": false,
"one-variable-per-declaration": false,
"only-arrow-functions": false,
"prefer-conditional-expression": false,
"prefer-const": false,
"prefer-declare-function": false,
"prefer-for-of": false,
"prefer-method-signature": false,
"prefer-template": false,
"radix": false,
"semicolon": false,
"space-before-function-paren": false,
"space-within-parens": false,
"strict-export-declare-modifiers": false,
"trim-file": false,
"triple-equals": false,
"typedef-whitespace": false,
"unified-signatures": false,
"void-return": false,
"whitespace": false
}
}