Skip to content
Permalink
Browse files

Refactor TypeScript definition to CommonJS compatible export (#131)

  • Loading branch information...
BendingBender authored and sindresorhus committed Mar 31, 2019
1 parent 1bd0f44 commit 682314de3fd5dc3378888a00935b4e3d65540ffb
Showing with 329 additions and 169 deletions.
  1. +156 −79 dist/screenfull.d.ts
  2. +2 −1 dist/screenfull.js
  3. +1 −1 dist/screenfull.min.js
  4. +5 −5 package.json
  5. +1 −1 readme.md
  6. +159 −80 src/screenfull.d.ts
  7. +1 −0 src/screenfull.js
  8. +4 −2 src/screenfull.test-d.ts
@@ -1,86 +1,163 @@
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';

export interface Screenfull {
/**
Whether fullscreen is active.
*/
readonly isFullscreen: boolean;

/**
The element currently in fullscreen, otherwise `null`.
*/
readonly element: Element | null;

/**
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(element?: 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;
/// <reference lib="dom"/>

declare namespace screenfull {
type RawEventNames = {
readonly requestFullscreen: string;
readonly exitFullscreen: string;
readonly fullscreenElement: string;
readonly fullscreenEnabled: string;
readonly fullscreenchange: string;
readonly fullscreenerror: string;
};

type EventName = 'change' | 'error';

interface Screenfull {
/**
Whether fullscreen is active.
*/
readonly isFullscreen: boolean;

/**
The element currently in fullscreen, otherwise `null`.
*/
readonly element: Element | null;

/**
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
```
if (screenfull.enabled) {
screenfull.request();
}
```
*/
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.
@example
```
// Fullscreen the page
document.getElementById('button').addEventListener('click', () => {
if (screenfull.enabled) {
screenfull.request();
} else {
// Ignore or do something else
}
});
// Fullscreen an element
const el = document.getElementById('target');
document.getElementById('button').addEventListener('click', () => {
if (screenfull.enabled) {
screenfull.request(el);
}
});
// Fullscreen an element with jQuery
const target = $('#target')[0]; // Get DOM element from jQuery collection
$('#button').on('click', () => {
if (screenfull.enabled) {
screenfull.request(target);
}
});
```
*/
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.
@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;
}
}

/**
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: 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;
@@ -1,6 +1,6 @@
/*!
* screenfull
* v4.1.0 - 2019-03-19
* v4.1.0 - 2019-03-31
* (c) Sindre Sorhus; MIT License
*/
(function () {
@@ -181,6 +181,7 @@

if (isCommonjs) {
module.exports = screenfull;
// TODO: remove this in the next major version
module.exports.default = screenfull;
} else {
window.screenfull = screenfull;

Some generated files are not rendered by default. Learn more.

@@ -15,7 +15,7 @@
},
"scripts": {
"pretest": "grunt",
"test": "xo && tsd-check"
"test": "xo && tsd"
},
"files": [
"dist/screenfull.js",
@@ -26,12 +26,12 @@
"fullscreen"
],
"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"
},
"types": "dist/screenfull.d.ts",
@@ -164,7 +164,7 @@ You can use the [Angular.js binding](https://github.com/hrajchert/angular-screen

```typescript
import {Directive, HostListener} from '@angular/core';
import * as screenfull from 'screenfull';
import screenfull = require('screenfull');
@Directive({
selector: '[toggleFullscreen]'

0 comments on commit 682314d

Please sign in to comment.
You can’t perform that action at this time.